[CSS3 introductory tutorial series] CSS3 Media Queries to implement responsive design_html/css_WEB-ITnose

In CSS2, you can specify dedicated style sheets for different media devices (such as screens, printers), and now with the help of the Media Queries feature of CSS3, you can even more Effectively implement this function. You can add certain conditions for media types, detect devices and apply different style sheets.

For example, you can put styles for display on large screens and styles for mobile devices in a style document so that different devices can render without changing the content of the document. Different interface looks. Read this article to learn the basic functions of CSS3 Media Queries and examples of excellent foreign websites that use the Media Queries features of CSS3.

Watch this online demo, resize your browser window and see how it changes.

Max Width

The following styles will be applied when the width of the visible area is less than 600px.

1

2

3

4

5

@media screen and ( max-width : 600px ) {

.class {

background : #ccc ;

}

}

If you want to link to a separate stylesheet, put the following code inside the tag.

1

Min Width

The following styles will be applied when the width of the visible area is greater than 900px.

1

2

3

4

5

@media screen and ( min-width : 900px ) {

.class {

background : #666 ;

}

}

Multiple Media Queries

You can also use a matching condition. The following style will be used when the width of the visible area is between 600px and 900px time is applied.

1

2

3

4

5

@media screen and ( min-width : 600px ) and ( max-width : 900px ) {

.class {

background : #333 ;

}

}

Device Width

The following style will be triggered on devices where max-device-width is 480px. (Tip: max-device-width is the actual resolution of the device, while max-width refers to the viewable area resolution.)

1

2

3

4

5

@media screen and (max-device- width : 480px ) {

.class {

background : #000 ;

}

}

For iPhone 4

The following styles are specially written for iPhone 4 (Author: Thomas Maier).

1

For iPad

You can also use media query Detect orientation (portrait or landscapse) on iPad (Author: Cloud Four).

1

2

Media Queries for IE

Unfortunately, IE8 and older browsers do not support CSS3 Media Queries, but you can use Javascript to make up for it. Here are some solutions Solution:

CSS Tricks - using jQuery to detect browser size

The Man in Blue - using Javascript

jQuery Media Queries Plugin

Attach : CSS3 Media Queries Browser Compatibility Table

CSS3 Media Queries Application Cases

Need to support the Media Queries feature below Browse in browsers: 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 columns sidebar

Small size: 2 list sidebar (middle column dropped to left column)

Smaller size: 1 column sidebar (right column moved up below logo)

Minimum size: None Sidebar (LOGO and right column move up, other sidebar columns move to the bottom)

Colly

The layout of the page will be in 1 column according to the size of the browser , to switch between 2 columns and 4 columns.

A List Apart

Large size: Navigation is at the top, and the image is only one line.

Medium size: The navigation is on the left and the images become 3 columns.

Small size: The navigation is at the top, the LOGO has no background image, and the image becomes 3 columns.

Tee Gallery

This is very similar to the previous Colly, but the pictures in this case will also change as the layout changes. The trick is to use percentages to set the width of the element.

Summary

Remember: just because your stylesheet is optimized for mobile devices doesn’t mean your site is suitable for display on mobile devices. To be truly mobile-optimized, reduce image size, number of tags, size of loaded assets, etc. CSS3 Media Queries are for design presentation, not optimization.