one, concept
Media Query: Media query.
Introduced in CSS3, demo:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
2. Media Type
Media Type is a common attribute in css2, and it is also a very useful attribute. You can specify different styles for different devices through media types. In css2, we often encounter all (all), screen (screen), print (page print or preview mode), in fact, there are more than three media types, w3c lists a total of 10 media types.
1), the link method is introduced
<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
2), imported in xml
<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>
3), @import method is introduced
There are two ways to import @import, one is to call another style file through @import in the style file; the other is to use <style>...</style> in <head>>/head> Introduced, this usage method is not supported in ie6-7.
demo: @import url("css/reset.css") screen;
4), introduced by @media
@media screen{
Selector{
attribute: attribute value;
}
}
Three, Media Query
Media Query is an enhanced version of CSS3 for Media Type. In fact, Media Query can be regarded as Media Type (judgment condition) + CSS (conditional style rule). There are 13 commonly used features in w3c.
Commonly used as follows:
If the Media Type is not explicitly specified in the Media Query, it defaults to all.
demo:
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)"
href="style.css" type="text/css" />
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"
type="text/css" />
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css"
type="text/css" />
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
更多demo可参考: https://www.w3.org/TR/css3-mediaqueries/#media1
四,兼容性
参考: https://www.w3cplus.com/content/css3-media-queries