< turn >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 CSS3Media Queries feature, which can be implemented more effectively. 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.

CSS3 Media Queries

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)

Colly

The layout of the page switches between 1 columns, 2 columns, and 4 columns based on the size of the browser.

A List Apart

• Large Size: navigation at the top, only one line of the picture.
• Medium size: navigation on the left, the picture becomes 3 columns.
• Small size: navigation at the top, logo without a background image, the picture into 3 columns.

Tee Gallery

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

Summarize

Keep in mind that optimizing stylesheets for mobile devices does not mean that your site is suitable for display on mobile devices. To achieve real mobile device optimization, reduce the size of the image, the number of labels, the size of the loaded resources, and so on. CSS3 Media Queries is used for design rendering, not optimization.

"Reference article"

* "What is CSS Media querie"

* "Webdesignwall:css3 Media Queries"

* "Can I use CSS3 Media Queries?"