时间：2021-07-01 10:21:17 帮助过：15人阅读
利用我们的CSS3实现响应式布局
仅仅有弹性盒还不够
CSS3还扩展了media属性，增加了一个模块功能
Media Queries媒体查询功能
随着移动端的快速普及
越来越多的用户使用智能机、平板电脑等浏览页面
所有考虑到用户的需求
我们要保证用户在各种设备上浏览页面都有不错的体验
这样我们就需要媒体查询
它允许我们为不同的设备或者不同条件的设备设置不同的样式
不过如果移动端有很重要的需求
还是应该针对移动端开发专门的页面比较好
下面我们来看看引入媒体查询的方式
首先我们先来看看link方法
这是CSS2中的做法
使用link标签和media属性引入不同样式表（如果满足条件）
<link rel="stylesheet" media="screen and (max-width: 600px)" href="demo.css" />
这里引入两个概念
一个是媒体类型（Media Type），这里的screen
一个是媒体特性（Media Query），这里的max-width: 600px
Media Query是CSS3 对Media Type的增强版
其实可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则)
这段代码翻译过来就是
如果媒体介质是屏幕类型并且视窗宽度≤600px，则引入demo.css样式文件
我们在CSS3中的做法是在CSS文件中使用@media规则添加不同样式
相比link，它能够减少页面请求，效果更佳
@media screen and (max-width: 600px) { .demo1 { ......
}
.demo2 {
......
}
}媒体查询有很多很多，我们不需要了解那么多
常用的只有上面两种
@import也可以使用媒体查询
@import url(demo.css) screen;
如果我们想指定多个媒体特性
就直接使用and关键字
媒体特性部分的指定需要使用括号
media="screen and (min-width: 601px) and (max-width: 800px)"
样式应用在601px~800px之间的屏幕
媒体查询没有or指定备用媒体功能，但是我们可以使用逗号分隔列表
media="screen and (min-width: 601px), print and (min-width: 6in)"
样式应用在601px+的屏幕或使用至少6英寸宽的纸张的打印设备
媒体查询可以指定否定条件
需要我们在媒体声明的最前面使用关键字not
注意，它不能再单个条件前单独声明，not会否定整个媒体声明
media="not screen and (min-width: 600px) and (max-width: 800px)"
样式应用在不是600px~800px之间的屏幕
除了not关键字，还有一个only
它用来向早期的浏览器隐藏媒体查询
类似于not，必须声明在媒体声明语句的最前面
比如这段声明
media="screen and (min-width: 601px) and (max-width: 800px)"
早期的浏览器，只能把它理解成media="screen"
由于它不理解媒体特性，所以它会对所有屏幕设备应用样式规则
但是使用了only关键字
media="only screen and (min-width: 601px) and (max-width: 800px)"
早期浏览器会把它理解为media="only"
但是不存在only媒体类型，所以它不会应用任何样式
实现了向早期的浏览器隐藏媒体查询的功能
媒体类型的关键字虽然很多，但是大多都被废弃了（谁用啊）
常用的也就是all、screen，再就是print
| 媒体类型 | 描述 |
|---|---|
| all | 所有媒体设备 |
| screen | 彩色屏幕： 电脑、平板、智能机.. |
| 打印机、打印预览 | |
| speech | 发生设备：屏幕阅读器.. |
| aural | （已废弃）语音和音频合成器 |
| braille | （已废弃）用盲人用点字法触觉回馈设备 |
| embossed | （已废弃）分页的盲人用点字法打印机 |
| handheld | （已废弃）便携设备：小型电话.. |
| projection | （已废弃）投影设备：幻灯片.. |
| tty | （已废弃）使用固定密度字母栅格的媒体：电传打字机和终端.. |
| tv | （已废弃）电视机类型设备：电视、网络电视.. |
媒体特性就非常多了，同样很多用不上
| 媒体类型 | 描述 |
|---|---|
| aspect-ratio | 输出设备中的页面可见区域宽度与高度的比率 |
| color | 输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0 |
| color-index | 在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0 |
| device-aspect-ratio | 输出设备的屏幕可见宽度与高度的比率 |
| device-height | 输出设备的屏幕可见高度 |
| device-width | 输出设备的屏幕可见宽度 |
| grid | 查询输出设备是否使用栅格或点阵 |
| height | 输出设备中的页面可见区域高度 |
| max-aspect-ratio | 输出设备的屏幕可见宽度与高度的最大比率 |
| max-color | 输出设备每一组彩色原件的最大个数 |
| max-color-index | 输出设备的彩色查询表中的最大条目数 |
| max-device-aspect-ratio | 输出设备的屏幕可见宽度与高度的最大比率 |
| max-device-height | 输出设备的屏幕可见的最大高度 |
| max-device-width | 输出设备的屏幕最大可见宽度 |
| max-height | 输出设备中的页面最大可见区域高度 |
| max-monochrome | 在一个单色框架缓冲区中每像素包含的最大单色原件个数 |
| max-resolution | 设备最大分辨率 |
| max-width | 输出设备中页面最大可见区域宽度 |
| min-aspect-ratio | 输出设备中页面可见区域宽度与高度的最小比率 |
| min-color | 输出设备每一组彩色原件的最小个数 |
| min-color-index | 输出设备的彩色查询表中的最小条目数 |
| min-device-aspect-ratio | 输出设备屏幕可见宽度与高度的最小比率 |
| min-device-width | 输出设备的屏幕最小可见宽度 |
| min-device-height | 输出设备的屏幕的最小可见高度 |
| min-height | 输出设备中的页面最小可见区域高度 |
| min-monochrome | 一个单色框架缓冲区中每像素包含的最小单色原件个数 |
| min-resolution | 设备的最小分辨率 |
| min-width | 输出设备中的页面最小可见区域宽度 |
| monochrome | 在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0 |
| orientation | 输出设备中的页面可见区域高度是否大于或等于宽度 |
| resolution | 设备的分辨率。如：96dpi, 300dpi, 118dpcm |
| scan | 电视类设备的扫描工序 |
| width | 输出设备中的页面可见区域宽度 |
这里注意区分device-width/height与width/height
device-width/height 是设备的宽度（而不是浏览器的宽度）
width/height是我们浏览器视窗的尺寸
使用documentElement.clientWidth/clientHeight即viewport的值
以上就是响应式布局之CSS3媒体查询Media Queries 的详细介绍的详细内容，更多请关注Gxl网其它相关文章！