Property introduction

1. Apply a portion of the stylesheet based on the results of one or more media queries. You can define different styles according to different media types.
2. @ media is very useful when a page needs a responsive layout. When the browser is resized, the page will also be re rendered according to the width and height of the browser, so that @ media recalculates whether to load the style.
   Example:

/* screen When the device is a computer screen, tablet, smartphone, etc. And width > 900px article style block  */
@media screen and (min-width: 900px) {
  .article {
    padding: 1rem 3rem;
  }
}

1. @media rules can be placed at the top of your code or anywhere else @Condition rule group Inside.

media type

• Describes the category of equipment. The media type is optional. The default is all.

1. All is loaded on all devices.
2. Print is loaded in the paging materials and documents viewed on the screen in print preview mode.
3. Screen computer screen, tablet, smartphone, etc., loaded in.
4. speech is loaded in sound producing devices such as screen readers.

• CSS2.1 and media query 3 define several other media types (tty, tv, projection, handheld, braille, embossed, and aural), which have been basically abandoned.

Logical operator

• The logical operators not, and and only can be used to form a complex media query. You can also combine multiple media queries into one rule by separating them with commas.

1. Not is used to get the negative value of the media query. If the media query returns false, it returns true. If it appears in a comma separated query list, it will only be reversed in the current scope. If you use the not operator, you must also specify the media type.

    /* Load in screen type  */
    @media screen {
      .box {
        background-color: red;
      }
    }
    /* Reverse */
    @media not screen {
      .box1 {
        background-color: red;
      }
    }

1. and is used to combine multiple media features into one media query. It is also used to connect media functions to media types.

    /* Load when screen type is greater than 960px  */
    @media screen and (min-width: 560px) {
      .box {
        background-color: red;
      }
    }
    /* Load when the screen type is greater than 960px and less than 1200px */
    @media screen and (min-width: 560px) and (max-width: 700px) {
      .box1 {
        background-color: burlywood;
      }
    }

1. Only is to not add styles in browsers that do not support media queries. Only is ignored when the browser processes keywords that begin with only.

@media only screen{
    .box {
        background-color: red;
    }
}
// Equivalent to in browser
@media screen{
    .box {
        background-color: red;
    }
}

1. , (comma) commas are used to combine multiple media queries into one rule. Each query in the comma separated list is processed separately from other queries. Therefore, if any query in the list is true, the entire media statement returns true. In other words, the list behaves like a logical or operator.

    /* Load when screen type is less than 240px or greater than 240px  */
    @media screen and (min-width: 560px), (max-width: 240px) {
      .box {
        background-color: red;
      }
    }
    /* Load when the screen type is less than 240px or greater than 360px and less than 700px */
    @media screen and (max-width: 240px), (min-width: 360px) and (max-width: 700px) {
      .box1 {
        background-color: burlywood;
      }
    }

Media function

• Judge the device where the css is currently used or browse the specific characteristics of the environment according to the attributes. The expression is optional. It is responsible for judging whether these characteristics or features exist and what the value is. Each media property expression must be enclosed in parentheses.
  Common media:

1. Height the height of the visible area of the page in the output device.
2. Width the width of the visible area of the page in the output device.
3. Max aspect ratio the maximum ratio of the screen visible width to the height of the output device.
4. Max device aspect ratio the maximum ratio of the visible width of the screen to the height of the output device.
5. Max device height the maximum height visible on the screen of the output device.
6. Max device width the maximum visible width of the screen of the output device.
7. The maximum visible area height of the page in the max height output device.
8. Max width the maximum visible area width of the page in the output device.
9. The minimum visible area height of the page in the Min height output device.
10. Min width the minimum visible area width of the page in the output device.

Other loading methods

Load on style tab

<style media="(min-width: 500px)">
  .box {
    background-color: red;
  }
</style>
<style media="(max-width: 500px">
  .box {
    background-color: burlywood;
  }
</style>

• Determine which style to load according to the media query defined by the media attribute.

@Load when import is used

@import url(./index.css) (min-width:350px);
@import url(./home.css) (max-width:750px);

• Add () at the end of loading to define the media query to determine which style to load.

< picture > label

<picture>
  <source media="(min-width: 650px)" srcset="demo1.jpg">
  <source media="(min-width: 465px)" srcset="demo2.jpg">
  <img src="img_girl.jpg">
</picture>

• Different pictures are displayed according to different screen sizes. If there is no match or the browser does not support the picture attribute, use the img element: