Media queries can display different styles for different screen sizes.
This is a new feature of CSS3.
Syntax
ps: written in style
@media mediatype and|not|only (media feature){
/*css代码*/
}
Detailed parameters:
-
mediatype is the media type, which can be written as any of the following
- all means all devices
- print means printer and print preview
- screen computer screen, tablet, mobile phone, the most commonly used
-
and | not | only means: and | non | a specific
-
(media feature): must be wrapped in brackets, that is, media features
- width visible width
- min-width minimum visible width
- max-width maximum visible width
example
@media screen and (min-width:320px){
html{
font-size:50px
}
}
The way of introducing resources from outside:
ps: written in the head, outside the style, the parameters are similar to the above and are not specified
<link rel="stylesheet" href="xxx.css" media="screen and (min-width:320px)">
It is recommended to use it together with rem to achieve the overall change, because rem is changed according to the font size in HTML, and the font size is modified through media queries to modify the overall size.
