CSS3 Media Queries

You can specify a special style sheet for different media devices (such as screens and printers) through media properties, while CSS3 makes it more effective through media queries. You can add certain query conditions for media types to detect devices and use different style sheets. For example, you can have a dedicated style for a Large Screen Display and a dedicated style for a mobile device. This will be very powerful, because it allows different devices to use different interface appearances, but does not change your document content. Read this article to learn more about the cases of media queries.

CSS3 Media Queries(DEMO)
Click the demo and zoom in and out the window size of your browser to observe the dynamic changes of page elements.

Max width

If the visible area width is less than 600 pixels, the following CSS will be applied.

Copy to ClipboardReference content: [www.bkjia.com] @ media screen and (max-width: 600px ){
. Class {
Background: # ccc;
}
}

If you want to introduce an independent style sheet, you can insert the following lines of code between Copy to ClipboardReference: [www.bkjia.com] <link rel = "stylesheet" media = "screen and (max-width: 600px)" href = "small.css"/>

Minimum Width

If the visible area width is greater than 900 pixels, the following CSS will be applied.

Copy to ClipboardReference content: [www.bkjia.com] @ media screen and (min-width: 900px ){
. Class {
Background: #666;
}
}

Multi-media Query

You can combine multiple media types for query. If the visible area width is between 600 pixels and 900 pixels, the following code will be applied.

Copy to ClipboardReference content: [www.bkjia.com] @ media screen and (min-width: 600px) and (max-width: 900px ){
. Class {
Background: #333;
}
}

Device width

If the maximum width of a device is 480 pixels (for example, iPhone), the following code is applied. Note: The maximum device width indicates the actual visible area of the device. The maximum width indicates the area of the visible area.

Copy to ClipboardReference content: [www.bkjia.com] @ media screen and (max-device-width: 480px ){
. Class {
Background: #000;
}
}

IPhone 4

Use the following code for iPhone 4. (Case: Thomas Maier)

Copy to ClipboardReference: [www.bkjia.com] <link rel = "stylesheet" media = "only screen and (-webkit-min-device-pixel-ratio: 2) "type =" text/css "href =" iphone4.css "/>

IPad

You can also use media queries to detect horizontal vertical coordinates on the iPad. (Case: Cloud Four)

Copy to ClipboardReference: [www.bkjia.com] <link rel = "stylesheet" media = "all and (orientation: portrait)" href = "portrait.css">
<Link rel = "stylesheet" media = "all and (orientation: landscape)" href = "landscape.css">

Media Queries solution for Internet Explorer
Unfortunately, Internet Explorer 8 or earlier does not support media queries. You can use JavaScript to make up for this defect. The following are several solutions:

1. CSS Tricks-using jQuery to detect browser size
2. The Man in Blue-using Javascript (this article was written six years ago)
3. jQuery Media Queries Plugin

Case site

You must browse the following sites in advanced browsers that support media queries, such as Firefox, Chrome, and Safari. See how the page layout responds as the window size changes.

Hicksdesign

Large Size:Three-column sidebar
Small Size:Two-column sidebar (center sidebar sink to left sidebar)
Smaller size:Sidebar (move the right column to the right of the Logo)
Minimum Size:No sidebar (move the Logo and right sidebar to the top, and move the other sidebar to the bottom)

Colly

Based on the size of the visible area of the browser, the layout is switched between one column, two columns, and four columns.

A List Apart

Large Size:Navigation in the top, a row of images
Medium Size:Navigation on the left, three images
Small Size:Navigation on the top, Logo with no background image, three images

Tee Gallery

This is very similar to the preceding Colly case, but the difference is that the images in Tee Gallery are elastically adaptive as the window size changes. The trick here is to use the percentage width instead of the fixed pixel width.

Summary

Remember: having an optimized mobile style sheet does not mean optimizing the mobile version website. True mobile device optimization, images and markup language must also be minimized, and Media queries is designed for performance rather than optimization.

Original English version: CSS3 Media Queries | WebDesignerWall
Translation: CSS3 Media Queries, Media device query | mango