CSS3: Media Queries For Multiple Devices

Currently, CSS2 support for the media type, which is the way that allow you to specify style sheet for specific media, such as either screen or print. Now CSS3 added a new function called ‘Media Queries’, which allow you to add expression to check and specify your style sheet more precisely for multiple devices.

How To Write The CSS3 Media Queries?

There are several features that you can use in media queries, which is

• width
• height
• device-width
• device-height
• orientation
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution
• scan
• grid

In this article, we will focus on the width, height, device-width, device-height and orientation.

Width / Height

Value: <length>
Applies to: visual and tactile media types
Accepts min/max prefixes: yes
The ‘width’ or ‘height’ media feature is used to describe the width or height of the targeted rendering surface of output device. It’s not the entire screen or page.

The following CSS will apply if the screen viewing area has not exceed 320px:

[xhtml]
<link rel="stylesheet" media="screen and (max-width: 320px)" href="mycss.css" />
[/xhtml]

Device-Width / Device-Height

Value: <length>
Applies to: visual and tactile media types
Accepts min/max prefixes: yes
It used to describe the width or height of the output device, such as the width or height of the entire screen or page (actual resolution of the device), rather than just the rendering area of the device.

The following CSS will apply if the screen viewing area has not exceed 480px:

[xhtml]
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="mycss.css" />
[/xhtml]

Orientation

Value: landscape / portrait
Applies to: visual media types
Accepts min/max prefixes: no
It used to indicate the orientation of the device, either in landscape mode or portrait mode.

Example, the following CSS only apply in landscape orientation mode:

[xhtml]
<link rel="stylesheet" media="screen and (orientation: landscape)" href="mycss.css" />
[/xhtml]

Multiple Media Queries Features

The following CSS shows you how to write multiple media queries feature in once:

[xhtml]
<link rel="stylesheet" media="screen and (min-device-width: 240px) and (max-device-width: 480px)" href="mycss.css" />
[/xhtml]

The code above only will apply if the resolution of the device is between 240px and 480px.

Enjoy The Article?

Are you enjoying this article? Share it to your friends! and join onlyWebPro Facebook Fan page to get more latest updates!
http://www.facebook.com/pages/Connect-with-onlyWebPro/149917668368025