css3 media query

responsive design,根据不同分辨率来区分设备。 css3新特性:

Check  demo and resize your browser window to see it in action.

Max Width

The following CSS will apply if the viewing area is smaller than 600px.

@media screen and (max-width: 600px) { .class { background: #ccc; } } 

If you want to link to a separate stylesheet, put the following line of code in between thetag.


Min Width

The following CSS will apply if the viewing area is greater than 900px.

@media screen and (min-width: 900px) { .class { background: #666; } } 

Multiple Media Queries

You can combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.

@media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; } } 

Device Width

The following code will apply if the max-device-width is 480px (eg. iPhone display). Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution. and width means the viewport width which is usually more flexible and versatile. If you want to target a specific device, use device-width , otherwise width might be better choice.

@media screen and (max-device-width: 480px) { .class { background: #000; } } 

For iPhone 4

The following stylesheet is specifically for iPhone 4 (credits: Thomas Maier).

For iPad

You can also use media query to detect orientation (portrait or landscapse) on the iPad (credits: Cloud Four).


meta tag

Another important aspect is the viewport meta tag

<meta name="viewport" content="width=device-width, initial-scale=1">

The above, called the viewport meta tag, lets you modify the “virtual viewport” of the mobile device to something different than the default, which is to zoom out on a webpage so its entire contents are visible on the screen. In the above, we’re telling the mobile device to display the page without any zooming, so how much the device is able to fit on the screen is what’s shown initially. We want this because we’ll be using CSS media queries to cater our webpage to the available real estate on different devices, and not the other way around.


This is an awesome small introduction on @media, meta-tag, (device-) width and the js way of doing media query.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s