What is a media inquiry

As we know, we use CSS (Cascading Style Sheet) language rules to style HTML on web pages, such as setting width, height, background color, and so on.

The most recent version of CSS is CSS3. CSS3 brings many new features and functions, such as: Rounded corners, graphical borders, block and text shadows, transparency using RGBA, gradient effects, custom fonts using @font-face, ** media queries **, etc.

So, what is a media query?

Media queries are a new feature of CSS3

Generally think media query is CSS3 new content, in fact, CSS2 has media query, but CSS3 and added new functions to make it more powerful, so that media query to carry forward

Media query function

The function is:

CSS3 new feature mediaqueries (mediaqueries), you can set different style effects according to different resolution (device)

Previously defined devices in CSS2 include TV devices, TTY devices, screen devices, printer print devices, and so on. Css3 basically abandoned a lot of unused devices, basically only keep screen devices, print devices such as. The print setting is used occasionally, but is more commonly used on screen devices.

Print device We can preview the print effect by pressing Ctrl+P

In short, media queries are primarily used for responsive layout

What is responsive layout

Responsive layout is the idea that we create pages that have different styles and effects on different screen sizes. For example, we need to display more information on a large screen. After all, the screen is so big that less information is wasted. On a small screen, we need to hide some things, because the screen is so small that it becomes bloated with information. Different screens have different responses, known as responsive layouts

For example, when the width of the viewable area screen is less than 480 pixels, we need to change the text on the screen from black to green. (Default is black)

Using JS

If the width of the screen resolution is less than 480, change the color of the text.

Prints information about the Screen object

Screen objects can get data about the browser window, such as resolution, Screen size, etc., which can be obtained through window.screen, and Screen also has methods to do other things, such as unlocking or locking Screen turning. For more information about screen objects, please visit the MDN official website: developer.mozilla.org/zh-CN/docs/…

The corresponding code

<! DOCTYPEhtml>
<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">Hello, this is a media enquiry</div>
    <script>
        window.onresize = () = > {
            console.log(screen.width); // Print to see the screen object information
            // Control via 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>
Copy the code

rendering

Use media queries

code

    <style>
        /* Use media queries to make setting styles easier */
        @media screen and (max-width: 480px) {
            div {
                color: green;
                font-weight: bolder;
            }
        }
    </style>
Copy the code

Change the color of the text to green and bold if the maximum width is 480px or less. Max-width: 0; min-width: 0

The renderings are the same as the ones above, no more drawings.

The two contrast

Through the above examples, we found that the media query is indeed more convenient in the process of writing, on the one hand, JS should try to minimize the DOM operation, as far as possible to reduce the reflux redraw, in a CSS style control is indeed more performance savings than through JS style operation. So to sum up, cSS3 brings new features, media query does have some application scenarios

Media query syntax

Media Device Types

Write directly in the style tag. There are four commonly used devices, actually three, as follows:

<! -- Specify screen device --><style media="screen"></style><! -- specify printer device --><style media="print"></style><! -- Select screen reader device --><style media="speech"></style><! -- specify all devices, equivalent to common style --><style media="all"></style>
Copy the code

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

<! -- Specify screen device -->
<link rel="stylesheet" href="css/style.css" media="screen">
<! -- specify printer device -->
<link rel="stylesheet" href="css/style.css" media="print">Such as...Copy the code

You can also import and specify the media interstitials syntax with @import, as follows:

<! -- when the screen width is greater than360px", use one.cssThe style of writing in the file -->@import url(./one.css) (min-width:360px); <! -- when the screen is smaller than880px', use two.cssThe style of writing in the file -->@import url(./two.css) (max-width:880px);
Copy the code

The three keywords of the logical operator are AND, not, and only

And keyword

“And” indicates the meaning of “and”. If both conditions are met before and after and, the corresponding media query statement will be executed. For example:

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

The meaning is as follows:

  • @media

    • Indicates that media is used to query information

  • screen

    • If you do not want to write screen device, you can not write screen device. If you do not write screen device, you can not write screen device.
    • @media (max-width: 480px)The effect is the same, except that the default values are omitted

  • and

    • “And” means “and” is usually followed by a condition that indicates the style under which the corresponding media query will be triggered. You can write multiple and to mean multiple conditions, for example
    • @media screen and (max-width: 480px) and (min-width: 360px) {
    • The above example means that the CSS statement is executed when the screen is larger than 360 pixels and smaller than 480 pixels

  • (max-width: 480px)

    • The maximum width of a condition must not exceed 480px, which means that it is less than or equal to

  • {corresponding CSS statement}

    • The statement that implements the effect of the corresponding style

Not keyword (not)

The ‘not’ keyword is inverted and should be placed after @media and before other statements. Here’s an example:

<style>
    /* If the size is less than or equal to 360px, change it to green and bold */
    /* @media screen and (max-width: 360px) { */

    /* Add not to the other side of the page, which means that the font size is greater than 360px
    @media not screen and (max-width: 360px) { 
        div {
            color: green;
            font-weight: bolder;
        }
    }
</style>
Copy the code

Only Keyword (only)

If the media query syntax is supported, use the corresponding media query syntax; if not, ignore it. As follows:

@media only screen and (max-width: 360px) {CSS

This writing method is rarely used, after all, it is currently only not supported by older browsers

As you can see from the image above, it is indeed the older browsers that are not supported, Google Chrome 21, which is many years old……

Supplement,orKeyword (use commas.Separate can be)

If we have a requirement that the width of the screen is less than 360px, or the width of the screen is greater than 480px, then make the font green and bold

In this case, we need to use the syntax of or, as follows:

<style>
    @media 
        screen and (max-width: 360px), /* Use commas to separate multiple or conditions */ screenand (min-width: 480px) {
            div {
                color: green;
                font-weight: bolder;
            }
        }
</style>
Copy the code

Complete syntax

@media  notoronlyOr don't write Mediatype or don't write (default screen if you don't write)and(mediafeature) {corresponding CSS statement}Copy the code

Media features are constraints. Under what conditions do I use a written CSS statement

Common media features

  • max-height

    • Maximum height, which means less than or equal to this height

  • min-height

    • The minimum height 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 is greater than or equal to this width

There are many media features, and which features to use depends on the actual situation of the project. Finally, attach the official website for media enquiries

The appendix website

W3school media query: www.w3school.com.cn/cssref/pr_m…

MDN media enquiries: developer.mozilla.org/zh-CN/docs/…