Use CSS3 's @media to write responsive pages

1{2/     *css-code; */ 3 }

The first thing to know is why we write adaptive pages (responsive pages)

"See the Dry Goods directly"

As we all know, the computer, tablet, mobile phone screen is very big gap, if the computer has written a page, on the computer looks good, but if put on the phone, it may be messy mess, how to solve it? Previously, can be specifically for mobile phone customization of a page, when the user visit, judge whether the device is a mobile phone or computer, if it is a mobile phone to jump to the corresponding mobile phone page, such as Baidu is, Mobile phone access www.baidu.com will jump to m.baidu.com, this is simply thankless work, so smart programmer developed a self-adaptive writing, that is, a development, everywhere display ! What kind of artifact is this, and then the mystery is unveiled.

CSS3 's@mediaQuery definition and use

With @media queries, you can define different styles for different screen sizes. @media can set different styles for different screen sizes, especially if you need to set up a design-responsive page, @media is very useful. When you reset the browser size, the page also re-renders the page based on the width and height of the browser, which is a great convenience for debugging.

CSS syntax

There are many types of media types (mediatype), which are not listed here, but are listed in a few common.

value	Description
All	For all devices
Print	For printer and print preview
Screen	For computer screen, tablet, smartphone, etc. (most commonly used)
Speech	Apply to audible devices such as screen readers

Media features (feature)

There are also a lot of media features, the following list of commonly used several

value	Description
Max-width	Defines the maximum visible area width of a page in an output device
Min-width	Defines the minimum visible area width of a page in an output device

Start writing responsive pages

Before writing, there are several jobs to be prepared for

Prepare for Work 1: Set META tags

First, we need to set up the following code to be compatible with the display of mobile devices when using @media:

<meta name="viewport" content="width=device-width, initial-scale=1.0,  user-scalable=no">

Several parameters of this code are explained:

• width = device-width: Widths equal to the width of the current device
• Initial-scale: Initial zoom ratio (default = 1.0, which means no scaling)
• User-scalable: Whether the user can zoom manually (the default is no, because we don't want the user to zoom out of the page)

There are many other parameters, want to know the children's shoes can go directly to Baidu

Ready to work 2: Load compatible files JS

Because IE8 neither supports HTML5 nor supports CSS3 @media, we need to load two JS files to ensure that our code achieves compatibility:

<!--[if lt IE 9]>  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script><![endif]-->

Ready to Work 3: set IE rendering defaults to highest (optional)

Now a lot of people's Internet Explorer has been upgraded to IE9 above, so this time there are a lot of weird things happen, such as now IE9 browser, but the browser's document mode is IE8 in order to prevent this situation, we need the following code to make IE's document rendering mode is always up-to-date

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

Add a chrome=1 After this code, if the user's computer installed chrome, you can let the computer inside of IE regardless of which version of the WebKit engine and V8 engine can be used for typesetting and operation, if not installed, display ie the latest rendering mode.

Code instance

1. If the document width is less than or equal to 300px , apply the style inside the curly brackets--Modify the body background color (Background-color):

@media screen and (max-width: 300px) {    body {        background-color:lightblue;    }}

As you can see from the code above, the media type is Screens (screen), using a andConnect the following media functions, which are written here max-width:300px, which means that when the screen maximum width is less than or equal to 300px, apply the pattern inside the curly braces. 2. Style displayed when document width is greater than or equal to 300px

@media screen and (min-width: 300px){    body {        background-color:lightblue;    }}

Note that the media feature here uses min-width instead of Max-width, and I've highlighted the red highlighting. 3. The style displayed when the document width is greater than or equal to 300px and less than or equal to 500px

@media screen and (min-width: 300px) and (max-width: 500px) {    body {        background-color:lightblue;    }}

Note that two and is used here to connect two media functions, one to limit the minimum, and one to limit the maximum.

※ Places to be aware of (focus)

1, through the flexible application of the above skills, developed a responsive page, is not near the feeling _ (: З"∠) _ 2, do not be confused by min-width and Max-width, beginners are easy to mistakenly think Min-width mean is less than XXX when applied, However, this is a mistake, in fact, it means: when the min-width is set, the width of the document is less than the set value, it will not apply the CSS style in this block, so Min-width It will be worth more than equal to set the time to apply The block CSS style , Max-width is also the case. 3, or think of this, first look at the code, this code meaning is greater than or equal to 300px, less than or equal to 500px when applying the style

@media screen and (min-width:300px) and (max-width:500px) {    /* CSS 代码 */}

The role of min-width:300px is to apply the CSS block in {}, which is greater than or equal to 300px max-width, when the document width is not less than 300px. : The role of 500px is when the document width is not larger than 500px when the CSS block is applied {}, that is, less than or equal to 500px is it easy to understand? 4, there is a bend difficult to bypass, their own more hands-on to do the experiment, the brain to think, the enlightened .

Use CSS3 's @media to write responsive pages