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.

Take a look at this online demo, resize your browser window and see how it changes.

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

Media Queries for IE

Unfortunately yes, IE8 and older browsers do not support CSS3 Media Queries, but can be used to make up for Javascript, here are some solutions:

• CSS tricks-using jQuery to detect browser size
• The mans in Blue-using Javascript
• JQuery Media Queries Plugin

Attached: CSS3 Media Queries Browser compatibility table

CSS3 Media Queries Application case

You need to browse through the following browsers that support Media Queries features: ie9+, Firefox, Chrome, and Safari. Browse each site to see how the page layout responds to changes in the browser window.

Hicksdesign

• Large Size: 3 column side bar
• smaller size: 2 list sidebar (the middle column falls to the left column)
• Smaller size: 1 column sidebar (right column up below the flag)
• Minimum Size: no sidebar (logo and right column move up, other sidebar columns to bottom)

CSS3 Introductory Tutorial Series CSS3 Media Queries for Responsive design