Media Query 简介
Media Query 即媒体查询,借助其可实现响应式设计。Meidia Queries,该网站收集了很多优秀的 RWD(Responsive web design) 的网站。
在 HTML4 和 CSS2 只支持对于不同的媒体类型来设置样式,而 Media Query 扩充了 Media Type 的功能,并且使我们能够更精准的应用样式表。
浏览器兼容性
浏览器 | IE | Edge | Firefox | Chrome | Safari |
---|---|---|---|---|---|
版本 | 8+ | ? | 21 | 3.5 | 4 |
Polyfill
浏览器向下兼容可用该库:respond.js
该插件已经停止维护,请谨慎使用
媒体类型 Media Type
W3C共列出了10中媒体类型。
类型 | 解释 |
---|---|
all |
所有设备 |
screen |
彩色电脑屏幕 |
speech |
语音合成器 |
print |
文档打印或打印预览模式 |
braille |
|
embossed |
|
handheld |
|
projection |
|
tty |
|
tv |
注意:CSS2.1 和 CSS3 media query 定义了
tty
,tv
,projection
,handheld
,braille
,embossed
,aural
这些 Media Type,但是它们在 Media Query Level 4 中都废弃了,所以不推荐使用了。
属性(Media Feature)
属性 | 值 | MIN/MAX前缀 | 描述 |
---|---|---|---|
color |
整数 | yes | 每种色彩的字节数 |
color-index |
整数 | yes | 色彩表中的色彩数 |
aspect-ratio |
整数/整数 | yes | 宽高的比值 |
device-aspect-ratio |
整数/整数 | yes | 宽高比例 |
device-width |
length | yes | 设备屏幕的输出宽度 |
device-height |
length | yes | 设备屏幕的输出高度 |
grid |
整数 | no | 是否是基于格栅的设备 |
width |
length | yes | 渲染界面的宽度 |
height |
length | yes | 渲染界面的高度 |
monochrome |
整数 | yes | 单色帧缓冲器中每像素字节 |
resolution |
分辨率(“dpi/dpcm”) | yes | 分辨率 |
scan |
Progressive interlaced | no | tv媒体类型的扫描方式 |
orientation |
Portrait/landscape | no | 横屏或竖屏 |
overflow-block | 这是如何沿着溢出块轴视输出设备句柄的内容 | ||
overflow-inline | 可以在溢出沿字形轴视内容进行滚动 | ||
resolution | 输出设备的分辨率,使用DPI或DPCM | ||
scan | 输出设备的扫描过程 | ||
update-frequency | 如何能迅速输出设备修改内容的外观 |
Media Queries Level 4
color 与 color-index
color
描述的是设备的色彩深度,如果设备不是彩色设备,则值为 0
,黑白设备的话就是 1
。
color-index
指色指数,至于什么是色指数,请看这里,反正我看完维基百科的词条后,觉得这辈子用上这个属性的概率基本为零。
orientation
@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }
aspect-ratio 与 device-aspect-ratio
device-aspect-ratio
定义的是 device-width
与 device-height
的比值,而 aspect-ratio
定义的是 width
与 height
也就是 viewport 的宽高比值,该属性在应付 Android 设备很有效。
比如,具有1280*720像素的设备(也就是“16:9”),则以下媒体查询全都是匹配的:
@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 32/18) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }
@media screen and (device-aspect-ratio: 2560/1440) { … }
引入方式
link 方法引入
<link rel="stylesheet" type="text/css" media="all and (max-width: 600px)" href="style.css" />
XML 方式引入
<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ?>
@import 方式引入
<style>
@import url("style/print.css") print;
@import url(style/style.css) screen;
</style>
不过我们应该尽量避免使用 @import
语法。
@media 方式引入
@media screen and (max-width: 1920px) {
/* CSS Rules used when query matches */
}
style 方式引入
<style type="text/css" media="screen and (max-width: 1920px)">
/* CSS Rules used when query matches */
</style>
逻辑运算符
各个条件可以用逻辑运算符号连接起来。
and 关键词
and
关键字用于合并多个媒体属性或合并媒体属性与媒体类型。
<style>
/*这两者是等价的*/
@media (max-width: 1920px) and (min-width: 1366px) {
/* CSS Rules used when query matches */
}
</style>
Or 关键字
媒体查询中使用逗号分隔效果等同于 or
逻辑操作符。当使用逗号分隔的媒体查询时,如果任何一个媒体查询返回真,样式就是有效的。逗号分隔的列表中每个查询都是独立的,一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。
or
与,
的作用是等价的,个人建议用,
,比较容易辨识。
<style>
/*这两者是等价的*/
@media (max-width: 1920px),(min-width: 1366px) {
/* CSS Rules used when query matches */
}
@media (max-width: 1920px)or(min-width: 1366px) {
/* CSS Rules used when query matches */
}
</style>
not 关键字
not 关键字是用来排除某种制定的媒体类型。not 是对整个 media query 进行否定,不能对单个 media feature 否定。
@media not screen and (color), print and (color) {}
/* 等同于 */
@media (not (screen and (color))), print and (color) {}
only 关键字
用来定某种特别的媒体类型。对于支持 media query 的移动设备来说,如果存在only
关键字,移动设备的浏览器会忽略 only
关键字并直接根据后面的表达式应用样式文件。对于不支持 media query 的设备但能够读取 media type 类型的浏览器,遇到 only
关键字时会忽略这个样式文件。
另外 only
必须位于 media query 的开头。