CSS Media Query

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

One

The first thing you need to do is add the following code to your HTML document that is compatible with the display of your mobile device

<meta name= "Viewport content=" Width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no "/>

Ps:

Width=device-width: Width equals width of current device

Initial-scale=1: Initial zoom ratio (default = 1)

Maximum-scale=1: Allows the user to zoom to the maximum scale (default is 1)

User-scalable=no: User cannot manually scale

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

Cases:

@media screen and (max-width:720px) and (min-width:320px) {

body{

background-color:red;

}

@media screen and (max-width:320px) {

body{

Background-color:blue;

}

}

PS: This section of media query means: When the device screen width between 320px--720px, media query body background color (background-color:red; ) will overlap before the body background color, when the device screen width is below 320px, the body of the media query body background color (background-color:blue; ) will overlap before the body background color

CSS Media Query