CSS Media Type Detail
A CSS Media type is a CSS rule that allows the website to detect the type of media (For Example, browser size, screen resolution) and display specific CSS code accordingly. There are many different device types that can access the web. Below is a table of the possible device types. We will only be working with the "screen" CSS Media type. The other types are for coding your site for Access ability.
CSS Type CSS Type Description
all Detects all device media type
aural Detects speech and sound devices for Accessibility
braille Detects braille tactile feedback devices for Accessibility
embossed Detects paged braille printers for Accessibility
handheld Detects devices that are handheld
print Detects if its a printer
projection Detects projected slide presentation
screen Detects computer screens
Display Resolutions for Devices
Before you create your website, you will want to get an idea of what size your site should be on any given device. Below are lists of popular, mobile Phone, Tablet, and Desktop computer display sizes. You can also read briefly article on Wikipedia.
Device resolutions can actually range from 320px - 1,920px! Unfortunately this large of a range brings complexity so let's break down the good, the bad, and the ugly.
Good:
Each device has a min and max-device width or 'trigger' point in portrait and landscape view. In other words, if you use a media query with a given conditional statement in your email, it will respond to that breakpoint.
Bad:
- Some devices trigger the same min and max-dimensions in portrait AND landscape view
- Android users can define a 'zoom' setting which changes the resolution of the display
- The introduction of Apple's Retina Display and the HD quality resolutions supported on several new Android devices use a pre-set 'zoom' multiplier to display your email.
Mobile phone sizes.
The following are a few popular devices size and resolution to give you an idea of what size you will want to make your website. Understanding Screen Densities.
- iPhone 4S: 3.5 inches 640 x 960px
- Samsung Galaxy Nexus: 4.65 inches 720 x 1280px
- Sony Ericsson: 4 inches 480 x 854px
- Nokia Lumia 800: 4.5 inches 480 x 800px
- Motorola Photon 4g/ELECTRIFY: 4.3 inches 540 x 960px
Tablet screen sizes.
Mobile phones, tablets can vary between brands and types on the size of the display.
- Apple iPad: 9.7 inches 1024 x 768px
- Kindle Fire HD 8.9: 8.9 inches 801 x 533px
- Samsung Galaxy Tab 10.1: 10.1 inches 1280 x 800px
- Nexus 7: 7 inches 966 x 603px
- Windows Surface Pro: 10.6 inches 1920 x 1080px
How to design Responsive Layouts?
If you have some know how about CSS and HTML it will b very easy for you to design responsive layout for your webpage and when you will yourself design it then trust me you will b having great passion for design responsive webpage.
You would love to play with your layout columns using just your browser.
Before 2 years CSS3 has introduced new techniques of reaching some frequently used functions. It is no more limited to just styles but it now supports some really interesting front-end programming functions. The most popular amongst them are Media Queries (@media ) that acts like conditional IF statements used in blogger. You must be familiar that how difficult it is to click a web link in IPhone unless you zoom it.. In order to tell the browser to detect the screen size we will add a META viewport tag inside <head> section of your layout.
The viewport Meta tag alters the behavior of a mobile browser by modifying the "virtual viewport" of the device. The virtual viewport is the view of a mobile device screen that is other than the default view; therefore being deemed "virtual". This allows the screen on devices to have specified zoom behaviors. Below is the code snippet we will use.
<meta name="viewport" content="width=device-width">
This Meta tag tells the mobile device to not zoom. This allows the Responsive Template for mobile devices to be loaded in the scripts. Below is a table of different properties that can be used for the viewpoint Meta Tag.
Using CSS media queries to target different devices
iPhones, IPads, Android Tablets, TVs, and oh yes, the PC. Just a few years ago it was hard to imagine anything other than your bulky desktop or laptop at best travelling the information highway, but nowadays, those devices seems to be more and more in the minority. CSS media queries lets you quickly target different devices in your CSS, primarily through the window/screen dimensions of these devices.
Targeting "small screen" devices
To kick things off, you can use the below to target "small screen" devices:
/* target mobile devices with max device width 480px */
@media screen and (max-device-width: 480px) {
/* CSS Properties for Smart Phones */
}
In our next part we will teach you how to design responsive Template for your website or blogger blog.
Any Trouble
If you are facing confusion in any part just leave your valuable comment in the comment box below. Please let me know how useful was this tutorial for you and did it help answering most of your questions…?
