CSS3 Media Query Summary

1, what is the media query

Media queries allow us to set CSS styles based on the features of the device display, such as viewport width, screen scale, device orientation: Landscape or portrait, and media queries consist of media types and one or more conditional expressions that detect media characteristics. The media features available for detection in media queries are width, height, and color (and so on). With media queries, you can customize the display for certain output devices without changing the content of the page.

2, why responsive design needs, media inquiries
If you do not have a CSS3 media query module, you cannot set a specific CSS style for device features such as viewport width

3, how to introduce the media query in the CSS file

Media queries are written at the end of CSS style code, CSS is cascading style sheets, under the same particularity, the back style will overlap the previous style

4. How to use media

Prepare for Work 1: Set META tags

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

1. <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:

1. <!--[If Lt IE 9]>
2. <script src= "Https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" ></script>
3. <script src= "Https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js" ></script>
4. <! [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:

1. <meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
2. <meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >

This code is followed by a chrome=1, this Google Chrome frame (Google embedded browser framework GCF), if some of the user's computer contains the 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.

Ii. How to write CSS Responsive media query in CSS file

Example: change according to different width styles

Html:

<ul><li>john doe</li><li>mary Moe</li><li>amanda Panda</li></ul> CSS: //width less than 500 pixels@media screen and (max-width:500px) {ul>li {background:blue;                   Color: #fff;              font-size:12px; }} //Width at 500-700 megapixels@media screen and (max-width:700px) and (min-width:501px) {ul>li {background:goldenrod;                    Color: #000;              font-size:16px; }} //Width at 700-1000 megapixels@media screen and (max-width:1000px) and (min-width:701px) {ul>li {b                                Ackground:plum;                                Color: #000;                           font-size:20px; }} //Width greater than 1000 megapixels@media screen and (min-width:1001px) {ul>li {background:violet;                                 Color: #333;                          font-size:22px; }}//Style End
In a word, @media have three main points: 1,meta tag; 2, compatible with ie;3, @media screen and (max-width:980px) {} (example style)

CSS3 Media Query Summary