CSS3 media query media_queries Responsive Layout Getting Started Guide Summary of Knowledge Points

What is a media query

We know that we mainly use the rules of CSS (Cascading Style Sheets) language to style the HTML of web pages, such as the box model setting the width and height of the background color.

The latest version of the cascading style sheet we currently use is mainly the third version of CSS, which is CSS3. There are many new features and functions brought by CSS3, such as: rounded corners, graphical borders, block shadows and text shadows, use RGBA achieves transparency effects, gradient effects, uses @Font-Face to achieve custom fonts, media query and so on.

So, what is a media query? Media query is a new feature brought by CSS3

It is generally believed that media queries are new content of CSS3. In fact, CSS2 already has media queries, but css3 has added new features to make it more powerful, thus allowing media queries to flourish.

`Media query function`

The function is:

new feature mediaqueries in CSS3, which can set different style effects according to different resolutions (devices)

The devices previously defined in css2 include tv devices, tty devices, screen devices, printers, print devices, and so on. In css3, a lot of unused devices are basically discarded, and basically only screen devices and print devices are retained. The print setting is used occasionally, and the screen device is more commonly used.
For the print device, we can preview the printing effect Ctrl+P

In short, media queries are mainly used for responsive layout

`What is responsive layout`

The responsive layout is: The page we made has different styles and effects feedback on screens of different sizes. For example, we need more information to be displayed on the big screen. On a small screen, we need to hide some things, because the screen is too small, and the information displayed is too bloated. Different screens have different responses, which is a responsive layout

For example, there is a requirement: when the width of the screen in the visible area is less than 480 pixels, we change the text on the screen from black to green. (The default is black)

`Use js to solve`

Idea: Get the width of the screen resolution through the screen object, and make a judgment. If it is less than 480, change the color of the text.

`Print the information of the screen object`

The Screen object can obtain the relevant data of the browser window, such as the resolution and screen size, which can be obtained through window.screen. At the same time, the Screen also comes with some methods to do other things, such as unlocking or locking the screen rotation. For detailed information about the screen object, please visit the official website of MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Screen

`Corresponding code`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="meiti">哈喽，我是媒体查询</div>
    <script>
        window.onresize = () => {
            console.log(screen.width); // 打印看看screen对象信息
            // 通过js去控制
            if (screen.width <= 480) { 
                document.querySelector('div').style.color = "green"
                document.querySelector('div').style.fontWeight = "bolder"
            } else {
                document.querySelector('div').style.color = "black"
                document.querySelector('div').style.fontWeight = "normal"
            }
        }
    </script>
</body>
</html>

`Effect picture`

`Use media queries to resolve`

`Code`

    <style>
        /* 使用媒体查询，去设置样式更加方便 */
        @media screen and (max-width: 480px) {
            div {
                color: green;
                font-weight: bolder;
            }
        }
    </style>

When it is a screen device, and the maximum width does not exceed 480px, let the color of the text change to green bold font max-width is the maximum width, that is, when it is less than or equal to min-width The minimum width, that is, when it is greater than or equal to

The effect picture is the same as the above picture, so the picture is no longer attached.

`Comparison of the two`

Through the above examples, we found that media queries are indeed more convenient in the process of writing. On the one hand, js should try to operate dom as little as possible, and minimize reflow and redraw. In a style that is controlled by css, it is indeed more efficient than operating styles through js. . So in summary, the new features brought by css3, media query does have certain application scenarios

`Media query syntax`

`Media device type`

Write it directly in the style tag. At present, there are four kinds of devices that are more commonly used, in fact, there are three, as follows:

<!-- 指定屏幕设备 -->
<style media="screen"></style>
<!-- 指定打印机设备 -->
<style media="print"></style>
<!-- 指定屏幕阅读器设备 -->
<style media="speech"></style>
<!-- 指定所有设备，相当于公共的样式了 -->
<style media="all"></style>

If imported, it can also be imported by resetting the style sheet, as follows:

<!-- 指定屏幕设备 -->
<link rel="stylesheet" href="css/style.css" media="screen">
<!-- 指定打印机设备 -->
<link rel="stylesheet" href="css/style.css" media="print">
等 ......

You can also use @import to import and specify the media insertion grammar, as follows:

<!-- 当屏幕的宽度大于360px的时候，就使用 one.css 文件里面所书写的样式 -->
@import url(./one.css) (min-width:360px);
<!-- 当屏幕的小于880px的时候，就使用 two.css 文件里面所书写的样式 -->
@import url(./two.css) (max-width:880px);

`The three keywords of logical operators and, not and only`

`and keyword (and)`

And means and means that the two conditions before and after the and must be met before the corresponding media query statement will be executed, such as: @media screen and (max-width: 480px) {corresponding css statement}

The meaning is as follows:

@media
- Means: Use media queries
screen
- Means: screen device (such as computer phone or something), you can also leave it blank. If you don’t write it, the default is the screen screen device. If you don’t write screen, the syntax is as follows:
- @media (max-width: 480px) {corresponding css statement} The effect is the same, but the default value is omitted
and
- Means: and means, and is usually followed by a qualifying condition, which indicates the condition under which the corresponding media query style will be triggered. You can write multiple and to indicate the meaning of multiple conditions, for example
- @media screen and (max-width: 480px) and (min-width: 360px) {corresponding css statement}
- The meaning of the above case is: when it is a screen device, and the screen width is greater than 360 pixels and less than 480 pixels, execute the corresponding css statement
(max-width: 480px)
- The conditions are wrapped in parentheses, and the corresponding conditional statement is written in the parentheses. This means that the maximum width cannot exceed 480px, which means less than or equal to
{Corresponding css statement}
- Statement to achieve the corresponding style effect

`not keyword (not)`

The not keyword means inverted, it should be placed after @media and before other statements, as in the following case:

<style>
    /* 小于等于360px的变成绿色加粗字体 */
    /* @media screen and (max-width: 360px) {  */

    /* 加上not取反就是表示 就变成大于360px的变成绿色加粗字体了 */
    @media not screen and (max-width: 360px) { 
        div {
            color: green;
            font-weight: bolder;
        }
    }
</style>

`only keyword (only)`

If the media query syntax is supported, the corresponding media query syntax will be used, and if it is not supported, it will be ignored. as follows: @media only screen and (max-width: 360px) {css statement} This type of writing is rarely used, after all, only low-version browsers currently do not support it. Let’s look at the icon and when did the corresponding browser support it? From the above picture, we can see that it is indeed not supported by the lower version of the browser. Google Chrome 21 version, this is the version many years ago...

`Supplement ( or ) keywords (use commas , separate it)`

If we have such a requirement: when the width of the screen is less than 360px or the width of the screen is greater than 480px, let the font become green bold style

At this point, we need to use the or syntax, the code is as follows:

<style>
    @media 
        screen and (max-width: 360px) ,  /* 多个或的条件使用逗号隔开就行了 */
        screen and (min-width: 480px) {
            div {
                color: green;
                font-weight: bolder;
            }
        }
</style>

`Complete grammar`

@media  not或only或不写  mediatype或不写（不写就默认screen）  and  ( mediafeature媒体特性  ) {
   相应css语句
}

The media characteristics are the limiting conditions. Under what conditions can the corresponding written css statements be used

`Commonly used media features`

max-height
- Maximum height, which means less than or equal to this height
min-height
- The minimum height, which means that it is greater than or equal to this height
max-width
- Maximum width, which means less than or equal to this width
min-width
- The minimum width, which means that it is greater than or equal to this width

There are actually many media features, and the specific features used depend on the actual situation of the project. Finally, attach the official media query URL

`Appendix official website`

W3school's media query: https://www.w3school.com.cn/cssref/pr_mediaquery.asp MDN's media query: https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries