一. 媒体查询的历史：
很多朋友认为媒体查询是CSS3新增，事实并非如此。媒体查询在CSS3之前早已存在，只是比较粗放一些，仅用来区分媒体的类型。
看如下简单代码实例：
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
上述代码分析如下：
- link元素的media属性用来规定上述CSS代码应用的媒体类型。
- screen表示对应CSS文件应用于显示设备。
- all表示对应CSS文件应用于所有媒体设备.
- print表示对应CSS文件应用于打印机。
- 即便当前媒体不符合要求，也会下载对应的CSS文件，只是不应用。
media属性也可以用于<style>元素，规定当前css代码应用的媒体类型，本文就不再演示。
CSS3之后，媒体查询功能得到了增强，不但可以查询媒体类型，而且还可以查询媒体的相关属性。
比如可以根据当前浏览器视口的尺寸的大小，来应用不同的CSS代码或者CSS文件。
二.媒体类型与媒体属性：
上文已经介绍，CSS2媒体查询只能区分媒体类型，CSS3得到了进一步加强，可以区分媒体的属性。
CSS3 中Media Queries的使用方法如下：
@media 媒体类型 and (媒体属性) {你的样式}
注意：使用Media Queries必须要使用@media开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体属性（也可以称之为设备属性）。
媒体属性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体属性，第二部分为媒体属性所指定的值，而且这两个部分之间使用冒号分隔。
下面罗列一下当前媒体查询常见的媒体类型与媒体属性：
主要的媒体类型有：
-
screen：显示屏幕，比如电脑、手机或者pad屏幕。
-
tty：电传打字机已经等宽字符网格类的设备。
-
tv：电视等类型的设备。
-
projection：投影仪等设备。
-
handheld：一些手持设备。
-
print：打印机。
-
braille：盲人专用的一些设备。
-
aural：语音合成器。
-
all：表示适用于所有设备。
主要媒体属性有：
-
宽度属性：width | min-width | max-width。
-
高度属性：height | min-height | max-height。
-
设备宽度：device-width | min-device-width | max-device-width。
-
设备高度：device-height | min-device-height | max-device-height。
-
视口宽高比：aspect-ratio | min-aspect-ratio | max-aspect-ratio。
-
设备宽高比：device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio。
-
颜色属性：color | min-color | max-color。
-
颜色索引属性：color-index | min-color-index | max-color-index。
-
黑白属性：monochrome | min-monochrome | max-monochrome。
-
方向属性：orientation。
-
分辨率属性：resolution | min-resolution | max-resolution。
-
网格属性：grid。
但与CSS属性不同的是，媒体属性是通过min/max来表示大于等于或小于做为逻辑判断，
而不是使用小于（<）和大于（>）这样的符号来判断。
三. 具体使用（两种场所）
媒体查询有两种应用场所，一种用在<link>与<style>元素之上，一种是CSS代码内部。
下面抛开媒体查询具体的语法不谈，首先演示一下使用场所。
1. <style>或者<link>标签上(这种主要针对媒体类型做区分)
<style media="screen and (max-width:1000px)" > div{
color:red; } </style>
通过media属性规定媒体查询的具体内容，对于<link>标签也是同样的道理。
上述代码规定必须是显示器屏幕且视口尺寸小于等于1000px时候，能够将div字体颜色设置为红色。
2. 通过@media来使用
@media screen and (max-width:1000px){
div{
color:red;
}
}
上述代码应用于CSS代码内部，功能与前面的完全一样，以@media作为媒体插件的语法标记。
具体语法分析如下：
当媒体查询为true时，就会应用对应的CSS样式。
无论是通过media还是@media规定媒体查询，语法都一致，且媒体属性一定要用小括号包裹。
媒体查询中有如果有逻辑操作符，在构建多条件查询的时候非常有用，属于语法的一部分。
但是考虑到比较重要，下面单独拿出来进行一下详细介绍。
四.逻辑操作符：
1. and操作符：
与JavaScript中的逻辑与操作符一个道理，比如两侧的条件都满足时，才会返回true。
代码片段如下：
@media screen and (min-width:800px) and (max-width:1200px) {
div{
color:red;
}
}
上述代码规定当前媒体必须满足如下条件，才会将div颜色设置为红色：
- 媒体类型必须是screen，也就是必须是显示器，比如电脑或者手机登。
- 视口的尺寸必须大于等于800像素，小于等于1200像素，比如调整浏览器视口到此尺寸。
注意：如果操作符不是not或者only，那么媒体类型是可选的，如果省略，那么默认值是screen。
所以上述代码可以修改如下：
@media (min-width:800px) and (max-width:1200px) {
div{
color:red;
}
}
上面效果和带screen一致。
2. not操作符：
此操作符用于对一个媒体查询语句进行取反操作，类似于JavaScript中的逻辑非运算符。
代码片段如下：
@media not screen and (min-width:800px) and (max-width:1200px) {
div{
color:red;
}
}
对上述代码分析如下：
- not是对整个媒体查询语句的一个取反，而不是对某一个媒体属性取反。
- 所以上述代码等同于@media not( screen and (min-width:800px) and (max-width:1200px))。
3.or操作符：
与JavaScript逻辑或操作符相同道理，只要两侧满足一条，那么整个媒体查询语句返回值为true。
代码片段如下：
@media (max-width:500px) , (orientation: landscape) {
div{
color:red;
}
}
特别说明：or操作符用逗号表示，否则会报错。
只要满足视口宽度小于等于500像素或者横屏的任意一条，那么div字体颜色就会被设置为红色。
4.only操作符：
此操作符可能未来就会被淘汰了，它是为了兼容低版本的浏览器而存在的。
随着软硬件的发展进步，它可能就逐步失去存在的意义，下面简单介绍一下。
五.媒体属性：
媒体属性比较多，下面只介绍一些比较常用的几种。
且大多数支持min-或者max-前缀，比如与width属性关联的属性还有min-width和max-width。
为了节省篇幅和时间，只以width属性为例子进行介绍，其他属性也是如此。
1. 最大宽度max-width
max-width是媒体属性中最常用的一个属性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：
@media screen and (max-width:480px){
.ads {
display:none;
}
}
上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。
2.最小宽度min-width
min-width与max-width相反，指的是媒体类型大于或等于指定宽度时，样式生效。
3.多个媒体属性使用
Media Queries可以使用关键词and将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。
当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示：
@media screen and (min-width:600px) and (max-width:900px){
body {
background-color:#f5f5f5;}
}
4.设备屏幕的输出宽度Device Width
在智能设备上，例如iPhone、iPad等，可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率。
5. 内容显示区域宽高比：
aspect-ratio属性描述了内容输出区域的宽高比，属性值是以斜杠（/）分隔的整数。
代码片段如下：
@media (aspect-ratio: 1/2) {
div{
color:red;
}
}
6. 设备宽高比：
和内容区域宽高比比较相似，属性值格式相同。
关于它们之间的区别，以电脑端为例子，显示器屏幕宽高比就是设备宽高比。
但是浏览器客户区的宽高比就是内容内容宽高比，是不是很容易理解了。
@media (device-aspect-ratio:16/9) {
div{
color:red;
}
}
7. 内容高度与内容宽度：
height与width描述了媒体内容输出区域的高度和宽度，比如浏览器客户区的高度和宽度。
@media (height:800px) {
div{
color:red;
}
}
宽度是同样的道理，就不再举例子了。
8. 设备高度与设备宽度：
device-height与device-width描述了设备的高度和宽度，比如显示器屏幕的高度和宽度。
@media (device-width: 1200px) {
div{
color:red;
}
}
9. 方向:
orientation规定了设备是处于横屏状态还是竖屏状态。
具有两个属性值，landscape表示横屏，portrait表示竖屏。
@media (orientation: portrait) {
div{
color:red;
}
}
参考链接1 ：https://www.jianshu.com/p/927790abdd80
参考链接2：http://www.softwhy.com/article-10120-1.html
今天的文章媒体查询使用详解分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/33773.html
