Introduce what is a media query

What is the core of learning media query?

(Recommended tutorial: html video tutorial)

Realize the normal preview of the page under different devices [Judge the current device]

Media type

Divide different devices into different types

all (all devices)

print (printing device)

screen (computer screen, tablet, smartphone)

Media Features

Used to describe the characteristics of the device, such as width, height...

width The web page display area is completely equal to the set width

height The web page display area is completely equal to the set width Height

max-width / max-height The web page display area is less than or equal to the set width

min-width / min-width The web page display area is greater than or equal to the set width

orientation : portrait (portrait mode) | landscape (horizontal mode)

Syntax keyword

Purpose links media types and media characteristics together for device detection

and multiple media features can be linked together, which is equivalent to and

not excluding a media feature is equivalent to non, which can be omitted

only specifies a specific media Type, you can omit

Grammar

Outline syntax

<link rel="stylesheet" type="text/css" href="01.css" media="only screen and (max-width: 420px)">

- 内嵌式语法
      @media only screen  and (max-width: 420px) {
      	body {
      		background-color: red;
      	}
      }
      
      备注: 多个条件联写
      @media only screen and (width: 320px) and (height: 568px) {}

Related recommendations:html tutorial

The above is the detailed content of Introduce what is a media query. For more information, please follow other related articles on the PHP Chinese website!