CSS uses @media media queries for responsive design. What are media queries?

With the development of the Internet, various mobile devices such as smartphones and tablets can be seen everywhere. So how can our website be properly laid out on various mobile devices? Writing a set of code for each device is cumbersome and requires a lot of work. Then smart programmers will use a set of codes to make the website display reasonably on devices of different sizes. Therefore, the responsive design model was born, the core of which is "media query".

1. What is media query

Media query allows us to determine the characteristics of the device display (such as viewport width, screen ratio, device orientation: landscape or portrait) To set CSS styles for it, 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.

Using the @media query, you can define different styles for different media types. @media can set different styles for different screen sizes, especially if you need to set up a responsive page, @media is very useful. When you reset the browser size, the page will also be re-rendered based on the browser's width and height.

2. Use of @media media query

a. 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"/>

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: Allow the user to zoom to the maximum Scale (default is 1)
user-scalable=no: Users cannot manually scale

b. Write responsive media queries in CSS files

Basic syntax: @media media type and (Media Features) {Style}

Example 1:

@media screen and (max-width:480px){
body {
background:red
  }
}

means: When the screen is less than or equal to 480px, the background color in the page turns red.

Example 2:

@media screen and (min-width:900px){
body{
font-size：20px
    }
}

means: when the screen is greater than or equal to 900px, the font size on the page becomes 20px.

Example 3:

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

means: when the screen is between 600px~900px, the background color of the body is "#f5f5f5".

Summary: The above introduces what media query @media is, and gives examples of how to use media queries.

The above is the detailed content of CSS uses @media media queries for responsive design. What are media queries?. For more information, please follow other related articles on the PHP Chinese website!