This is the 7th day of my participation in Gwen Challenge

Attribute profile

  1. Apply a portion of a stylesheet based on the results of one or more media queries. You can define different styles for different media types.
  2. When a page needs a responsive layout,@mediaIs very useful. Because the browser resize, the page will also rerender the page according to the browser width and height, so@mediaRecalculation does not load the style.

Sample:

/* Screen when the device is a computer screen, tablet, smartphone, etc. And width > 900px uses the.article style block */
@media screen and (min-width: 900px) {
  .article {
    padding: 1rem 3rem; }}Copy the code
  1. @mediaRules can be placed on top of your code or anywhere else@ Conditional rule groupInside.

The media type

  • This section describes the types of devices. The media type is optional and the default isallType.
  1. allLoad it on all devices.
  2. printLoad paging material and documents viewed on screen in print preview mode.
  3. screenComputer screens, tablets, smart phones, etc.
  4. speechScreen readers and other sound devices loaded.
  • CSS2.1 and Media Query 3Several other media types are defined(TTY, TV, Projection, Handheld, Braille, embossed, and Aural), is now largely abandoned.

Logical operator

  • Logical operatornot.andAs well asonlyCan be used to compose a complex media query. You can also combine multiple media queries into a single rule by separating them with commas.
  1. notUsed forMedia queriesTake the inverse, ifMedia queriesreturnfalse, the returntrue. If it appears in a comma-separated list of queries, it only reverses in the current range. If you are usingnotOperator, you must also specify the media type.
    /* Load on type screen */
    @media screen {
      .box {
        background-color: red; }}/ * * /
    @media not screen {
      .box1 {
        background-color: red; }}Copy the code

  1. andUsed to combine multiple media features into oneMedia queriesIn the. It is also used to bringThe media functionwithThe media typeConnect.
    /* Load at screen type greater than 960px */
    @media screen and (min-width: 560px) {
      .box {
        background-color: red; }}/* Load at screen type > 960px < 1200px */
    @media screen and (min-width: 560px) and (max-width: 700px) {
      .box1 {
        background-color: burlywood; }}Copy the code

  1. onlyTo not add styles to browsers that do not support media queries. Browser processingonlyThe leading keywords will be ignoredonly.
@media only screen{
    .box {
        background-color: red; }} // the browser equivalent@media screen{
    .box {
        background-color: red; }}Copy the code
  1. , (comma)Commas are used to combine multiple media queries into a single rule. Each query in the comma-separated list is processed separately from the others. 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 on screen type less than 240px or more than 240px
    @media screen and (min-width: 560px), (max-width: 240px) {
      .box {
        background-color: red; }}/* Load in screen type < 240px or > 360px < 700px */
    @media screen and (max-width: 240px), (min-width: 360px) and (max-width: 700px) {
      .box1 {
        background-color: burlywood; }}Copy the code

The media function

  • Determine current usage based on attributescssThe device or the specific characteristics of the browsing environment. The expression is optional and is responsible for determining whether or not these features or characteristics exist and what their values are. Each media property expression must be enclosed in parentheses.

Commonly used media:

  1. heightOutput the height of the page visible area on the device.
  2. widthOutput the width of the page visible area in the device.
  3. max-aspect-ratioThe maximum ratio of the screen width visible to the height of the output device.
  4. max-device-aspect-ratioThe maximum ratio of the screen width visible to the height of the output device.
  5. max-device-heightThe maximum height at which the screen of the output device is visible.
  6. max-device-widthMaximum visible screen width of the output device.
  7. max-heightOutput the maximum height of the visible area of the page on the device.
  8. max-widthMaximum visible area width of a page on an output device.
  9. min-heightThe minimum height of the visible area of the page in the output device.
  10. min-widthThe minimum visible area width of a page in an output device.

Other loading methods

styleOn-label loading

<style media="(min-width: 500px)">
  .box {
    background-color: red;
  }
</style>
<style media="(max-width: 500px">
  .box {
    background-color: burlywood;
  }
</style>
Copy the code
  • According to theMedia attributeThe definition of theMedia queriesDetermine which style to load.

@import is loaded when used

@import url(./index.css) (min-width:350px);
@import url(./home.css) (max-width:750px);
Copy the code
  • Add at the end of the load(a)defineMedia queriesDetermine which style to load.

<picture>The label

<picture>
  <source media="(min-width: 650px)" srcset="demo1.jpg">
  <source media="(min-width: 465px)" srcset="demo2.jpg">
  <img src="img_girl.jpg">
</picture>
Copy the code
  • Display different images according to the screen size, if not matched or the browser does not supportpictureProperty uses theimgChemical element: