Summary of knowledge about CSS3 media queries

1. What is media query

Media query allows us to set it according to the characteristics of the device display (such as viewport width, screen ratio, device orientation: landscape or portrait) To define CSS styles, a media query consists of a media type and one or more conditional expressions that detect media characteristics. Media properties that can be detected in media queries are width , height , and color (etc.). Using media queries, you can customize the display effect for specific output devices without changing the page content.

2. Why responsive design requires media queries
If there is no CSS3 media query module, it cannot target device characteristics (such as viewport width) Set specific CSS styles

3. How to introduce media queries in CSS files

Media queries are written at the end of the CSS style code, CSS It is a cascading style sheet. Under the same specificity, the later styles will overlap the previous styles

4, How to use media

## Preparation 1: Set Meta tag

First of all, when using Media, we need to set the following code to be compatible with the display effect of mobile devices:

Explanation of several parameters of this code:

• width = device-width: The width is equal to The width of the current device

• initial-scale: Initial scaling (default setting is 1.0)

• minimum-scale: The minimum ratio that users are allowed to zoom to (default setting is 1.0)

• maximum-scale: The maximum ratio that users are allowed to zoom to (The default setting is 1.0)

• user-scalable: Whether the user can manually zoom (the default setting is no, because we do not want the user to zoom in and out of the page)

Preparation 2: Load compatible file JS

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

##Preparation 3: Set up IE rendering The mode defaults to the highest (you can choose to add this part or not)

Nowadays, many people’s IE browsers have been upgraded to IE9 or above, so at this time, many strange things happen, such as It is now an IE9 browser, but the document mode of the browser is IE8:

#In order to prevent this situation, we need the following code to enable IE's document mode Always the latest:

Google Chrome Frame (Google Embedded Browser Framework GCF)

, if any With this chrome plug-in installed in the user's computer, no matter which version of IE in the computer, it can use the Webkit engine and the V8 engine for typesetting and calculation, which is extremely powerful. However, if the user does not install this plug-in, then this code will cause IE to display the effect in the highest document mode. I still recommend that you use this code, but you can do it without it. 2. How to write CSS responsive media queries in CSS files

Example: Change styles according to different widths

HTML：

• John Doe
Mary Moe< /li>
Amanda Panda