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!