First, we need to set up the following code when using media to be compatible with the display of mobile devices:
Prepare for Work 1: Set META tags
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-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)
Minimum-scale: The minimum scale to allow the user to zoom (the default setting is 1.0)
Maximum-scale: Maximum scale allowed to be scaled by the user (default = 1.0)
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)
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 is compatible:
<!--[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 to the highest by default (this section can be added or not added)
Now a lot of people's Internet Explorer has been upgraded to more than IE9, so this time there are a lot of weird things happen, such as now IE9 browser, but the browser's document mode is IE8:
To prevent this, we need the following code to keep IE's document mode always up-to-date:
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
There is a better notation:
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >
How does this code add a chrome=1, this Google Chrome frame (Google embedded browser framework GCF), if some of the user's computer contains this Chrome plug-in, Can let the computer inside of IE regardless of which version of the can use WebKit engine and V8 engine for typesetting and operation, incomparable to force, but if the user did not install the plug-in, then this code will let IE in the highest document mode to show the effect. I suggest you use this code, but you don't have to.
Enter CSS3 media notation:
Let's take a look at the following code, estimated that many people in the responsive web site CSS very often see similar to the following code
@media screen and (max-width:960px) { body{ background: #ccc; }}
This should be considered a standard notation of media, the above CSS code means: When the page is less than 960px to execute the CSS below it. This should not be too much doubt.
Someone should find that there is a screen in the code above, which means to tell the device to use a serif font when printing a page, and a sans serif font when it is displayed. But at the moment I find a lot of sites will be directly omitted screen, because your site may not need to consider the user to print, you can write directly:
@media (max-width:960px) { body{ background: #ccc; }}
Then it is when the browser size is larger than the 960px time code:
@media screen and (min-width:960px) { body{ background:orange; }}
We can also mix and use the above usage:
@media screen and (min-width:960px) and (max-width:1200px) { body{ background:yellow; }}
The above code means that the following CSS is executed when the page width is greater than 960px or less than 1200px.
Media All Parameters Summary