CSS媒体查询（@media）全面解析 |
您所在的位置：网站首页 › html5中media › CSS媒体查询（@media）全面解析 |
|
首页 > CSS
CSS媒体查询（@media）全面解析
随着移动设备的快速普及，用户不再只是通过传统的电脑系来浏览 Web 内容，越来越多的用户开始使用各种尺寸的智能手机、平板电脑或者其它设备来浏览 Web 内容，为了确保使用不同设备的用户都能拥有不错的体验就需要用到媒体查询。
媒体查询是 CSS 样式表最重要的功能之一，所谓媒体查询指的就是根据不同的媒体类型（设备类型）和条件来区分各种设备（例如：电脑、手机、平板电脑、盲文设备等），并为它们分别定义不同的 CSS 样式。媒体查询能让 CSS 可以更精确的作用于不同的设备或同一设备的不同条件，让所有用户都能得到很好的用户体验。
1. 媒体类型
媒体类型用来表示设备的类别，CSS 中提供了一些关键字来表示不同的媒体类型，如下表所示：
媒体类型
描述
all
表示所有的媒体设备
aural
表示语音和音频合成器（听觉设备）
braille
表示盲人用点字法触觉回馈设备
embossed
表示盲人用点字法打印机
handheld
表示小型手持设备，如手机、平板电脑
print
表示打印机
projection
表示投影设备
screen
表示电脑显示器
tty
表示使用固定密度字母栅格的媒体，比如打字机或终端设备
tv
表示电视机类型的设备
2. 媒体特性
除了具体的类型外，还可以通过一些属性来描述设备的具体特征，例如宽度、高度、分辨率等，如下表所示：
值
描述
aspect-ratio
输出设备页面可见区域的宽高比
color
输出设备每个像素的比特值，常见的有 8、16、32 位。如果设备不支持输出彩色，则该值为 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
输出设备单色帧缓冲区中每个像素的最大位深度。如果设备并非黑白屏幕，则该值为 0
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
输出设备单色帧缓冲区中每个像素的最小位深度。如果设备并非黑白屏幕，则该值为 0
min-resolution
设备的最小分辨率
min-width
页面可见区域的最小宽度
monochrome
输出设备单色帧缓冲区中每个像素的位深度。如果设备并非黑白屏幕，则该值为 0
orientation
页面可见区域的旋转方向
resolution
设备的分辨率。如：96dpi、300dpi、118dpcm
scan
电视类设备的扫描工序
width
页面可见区域的宽度
3. 逻辑操作符
逻辑操作符包含 not、and 和 only 三个，通过逻辑操作符可以构建复杂的媒体查询，您还可以通过逗号来分隔多个媒体查询，将它们组合为一个规则。
and：用于将多个媒体查询组合成一条媒体查询，当每个查询规则都为真时则该条媒体查询为真，另外通过 and 操作符还可以将媒体特性与媒体类型结合在一起；
not：用于否定媒体查询，当查询规则不为真时则返回 true，否则返回 false。如果使用 not 操作符，则还必须指定媒体类型；
only：仅在整个查询匹配时才会生效，当不使用 only 时，旧版的浏览器会将 screen and (max-width: 500px) 简单地解释为 screen，忽略查询的其余部分，并将样式应用于所有屏幕。 如果使用 only 运算符，则还必须指定媒体类型。
4. 定义媒体查询
目前您可以通过以下两种方式来定义媒体查询：
使用 @media 或 @import 规则在样式表中指定对应的设备类型；
用 media 属性在 、、 或其他 HTML 元素中指定特定的设备类型。
1) @media
在《CSS @规则》一节中我们已经简单了解 @media，使用 @media 您可以指定一组媒体查询和一个 CSS 样式块，当且仅当媒体查询与正在使用的设备匹配时，指定的 CSS 样式才会应用于文档。示例代码如下：
/* 在小于或等于 992 像素的屏幕上，将背景色设置为蓝色 */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* 在 600 像素或更小的屏幕上，将背景色设置为橄榄色 */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
2) @import
@import 用来导入指定的外部样式文件并指定目标的媒体类型，示例代码如下：
@import url("css/screen.css") screen; /* 引入外部样式，该样式仅会应用于电脑显示器 */
@import url("css/print.css") print; /* 引入外部样式，该样式仅会应用于打印设备 */
body {
background: #f5f5f5;
line-height: 1.2;
}
注意：所有 @import 语句都必须出现在样式表的开头，而且在样式表中定义的样式会覆盖导入的外部样式表中冲突的样式。 3) media 属性 您还可以在 、、 等标签的 media 属性中来定义媒体查询，示例代码如下： /* 当页面宽度大于等于 900 像素时应用该样式 */ /* 当页面宽度小于等于 600 像素时应用该样式 */提示：在 media 属性中您还可以指定多种媒体类型，每种媒体类型之间使用逗号进行分隔，例如 media="screen, print"。 关注公众号「站长严长生」，在手机上阅读所有教程，随时随地都能学习。本公众号由C语言中文网站长亲自运营，长期更新，坚持原创。 微信扫码关注公众号 优秀文章 Go语言代码风格清晰、简单 Shell $*和$@的区别 C语言isalpha()函数：判断一个字符是否是字母 Linux awk命令详解 Python异常处理机制的底层实现 MySQL定义条件和处理程序 dependencyManagement：管理Maven依赖 SQL CHECK：检查性约束 Redis分布式锁应用（实现+原理） Java到底能干什么？实事求是地说一下 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |