CSS3 media queries

1. What is a media query?

Features of CSS3 Media Query syntax:

① Use @media query to define different styles for different media types;
② @media can set different styles for different screen sizes ;
③ When you reset the browser size, the page will also be resized according to the browser's size. The width and height re-render the page;
④ Multimedia queries are currently used for many Apple phones, Android phones, tablets and other devices.

2. Syntax specifications for media queries

@media mediatype and|not|only (media feature) {
   /* CSS样式 */
}
①Start with @media and pay attention to the @ symbol

② mediatype is the media type , such as screen (indicating computer screen, tablet, smartphone, etc.), print (indicating printer and print preview), all (indicating all devices)

③Keyword and not only (1) and: Indicates that multiple media features can be connected together, equivalent to the meaning of "and" (2) not : Indicates to exclude a certain media type, equivalent to the meaning of "not", it can Omit (3) only : Indicates specifying a specific media type and can be omitted

④ media feature media features must be enclosed in parentheses . Each media type has its own different characteristics, and different display styles are set according to the media characteristics of different media types. For the time being, we understand the following three commonly used ones: (1) width: Indicates the width of the visible area of the page in the output device (2) min-width: Indicates the width of the minimum visible area of the page in the output device (3) max-width: Indicates the output device The width of the maximum visible area of the page

3. Application: Change the background color according to the page width

<style>
    div {
        height: 200px;
        background-color: yellow;    /* 给div设置背景色为黄色 */
    }
    @media screen and (min-width:600px) {
        div {
            background-color: skyblue;    /* 表示屏幕尺寸大于等于600px时，背景色变为天蓝色 */
        }
    }
    @media screen and (min-width:900px) {
        div {
            background-color: pink;  /* 表示屏幕尺寸大于等于900px时，背景色变为粉色 */
        }
    }
    @media screen and (min-width:1200px) {
        div {
            background-color: red;  /* 表示屏幕尺寸大于等于1200px时，背景色变为红色 */
        }
    }
</style>
<body>
    <div></div>
</body>
The execution effect of the above code is as shown above. When we change the width of the browser window, the background color of our div box will change according to the conditions we set. This is the role of media queries.

We need to pay attention to the following two points:
(1) We should write media queries in order from small to large or from large to small, but our favorite is to write them from small to large, so that the code is more concise
(2) The maximum value max- Both width and the minimum value min-width include equal to

4. Media query + external link introduction CSS

When there are many styles, we can use different css files for different media . The method is to directly determine the size of the device in the link and then reference different css files.

4.1 Grammar specifications

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

4.2 Example

<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 600px)"> 

/* 表示电子设备屏幕大于等于600px时,将会引用styleA.css这个css文件 */

5. Media query + rem to achieve dynamic size changes of elements

Combined with the rem unit introduced yesterday, we know that rem follows html, so with rem, page elements can be set to different sizes. Media queries can modify styles according to different device widths. Therefore, media queries + rem can achieve dynamic changes in the size of page elements with different device widths.