CSS3 Introductory Tutorial Series 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.

{  . class {    background: #ccc;  } }

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

<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.

{  . 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.

{  . 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.) ）

{  . class {    background: #000;  } }

CSS3 Introductory Tutorial Series CSS3 Media Queries for Responsive design