What is the use of css media queries?

The role of css media query: Media query allows us to set the css style for the device display based on the characteristics of the device display, such as viewport width, screen ratio, device orientation, etc. The media query consists of the media type and one or It consists of multiple conditional expressions for detecting media characteristics.

The operating environment of this tutorial: Windows 10 system, CSS3 version. This method is suitable for all brands of computers.

(Learning video sharing: css video tutorial)

The role of css media query:

1. What is media Query

Media queries allow us to set CSS styles for the device display based on its characteristics (such as viewport width, screen ratio, device orientation: landscape or portrait). Media queries consist of media types and one or more Composed of conditional expressions to 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. How to introduce media queries into CSS files

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

3. How to use media

You need to add the following code to the html document to be compatible with the display effect of mobile devices

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

ps：

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

initial-scale=1: The initial scaling ratio (default is 1)

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

user-scalable=no: Users cannot manually scale

4. How to write CSS responsive media queries in CSS files

Example:

@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:

The meaning of this media query is: when the device screen width is between 320px and 720px, the background color of the body in the media query (background-color: red;) It will overlap the previous body background color. When the device screen width is below 320px, the body background color (background-color: blue;) of the body in the media query will overlap the previous body background color.

Related recommendations: CSS tutorial

The above is the detailed content of What is the use of css media queries?. For more information, please follow other related articles on the PHP Chinese website!