CSS3 Media Queries for Responsive design

In CSS2, you can specify a dedicated style sheet for different media devices, such as screens, printers, and now with CSS3 's media Queries feature, you can do this more efficiently. You can add certain conditions to the media type, detect the device, and adopt a different style sheet.

For example, you can put styles for display on large screens and special styles for mobile devices in a style document so that different devices can render different interface appearances without changing the contents of the document. Read this article to learn about the basic features of CSS3 media Queries and examples of excellent websites that use CSS3 media Queries features abroad.

Max Width

The following styles are applied when the width of the viewable area is less than 600px.

12345

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

If you want to link to a separate style sheet, put the following code in the

1	<link rel="stylesheet"media="screen and (max-width: 600px)" href="small.css"/>

Min Width

The following styles are applied when the width of the viewable area is greater than 900px.

12345

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

Multiple Media Queries

You can also use a match condition where the following style is applied when the width of the viewable area is between 600px and 900px.

12345

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

Device Width

The following style is triggered on a device with a max-device-width of 480px. (Tip: Max-device-width is the actual resolution of the device, while max-width refers to the visible area resolution.) ）

12345

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

For IPhone 4

The following styles are written specifically for IPhone 4 (author: Thomas Maier).

1	<link rel="stylesheet"media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css"/>

For IPad

You can also use media query to detect directions on your IPad (portrait or Landscapse) (author: Cloud four).

12	<link rel="stylesheet"media="all and (orientation:portrait)" href="portrait.css"><link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css">

CSS3 Media Queries for Responsive design