@media

When your browser size changes, the page will render according to the width and height of the browser; On the other hand, @Media can set different styles for different media types so that different page sizes can be adapted.

MDN: @media THE CSS@ rule can be used to apply part of a stylesheet based on the results of one or more media queries. Using it, you can specify a media query and a CSS block that can be applied to the document if and only if the media query matches the device that is using its content.

The media type

  • All: Applies to all devices
  • Print: Applies to paging material and documents viewed on the screen in print preview mode
  • Screen: Mainly used on the screen
  • Speech: Mainly used in speech synthesizers

Common Media Features

  • Width: indicates the viewable width of the browser
  • Height: the height that the browser can see
  • Device-width: specifies the screen width of the device
  • Device-height: indicates the height of the device screen
  • Orientation: The testing device is currently in horizontal or vertical state
  • Aspect-ratio: Checks the ratio of the browser’s visible width to height (e.g. Aspect-ratio :16/9)
  • Device-aspect-ratio: Detects the ratio of the width to the height of the device

Media queries

Logical operators available for media queries: – and – not – only – ‘,’ : comma separated

Apply to web site adaptation

@media screen and (min-width:1200px){background-color: green; } @media (min-width: 300px) {body{font-size: 18px}} @media (min-width: 600px) {body{font-size: 600px} @media (min-width: 300px) {body{font-size: 600px) {font-weight: 400; 20px} } @media (min-width: 960px) { body{font-size: 22px; } } @media (min-width: 1200px) { body{font-size: 24px; }}Copy the code

Tip: When using min-width as a rule, due to the nature of CSS, the maximum value should be placed at the bottom; Similarly, if max-width is used, the minimum value should be placed at the bottom;

You can also use and for complex queries:

@media screen and (min-width: 1200px) { body { background: saddlebrown; }} @media screen and (min-width: 960px) and (max-width: 1200px) {body {background: yellow; }} @media screen and (min-width: 600px) and (max-width: 960px) {body {background: darkmagenta; }} @media screen and (min-width: 300px) and (max-width: 600px) {body {background: aqua; }} @media screen and (max-width: 300px) {body {background: salmon; }}Copy the code

\