多媒体查询
媒体查询可用于检测很多事情,例如:
- viewport(视窗) 的宽度与高度
- 设备的宽度与高度
- 朝向 (智能手机横屏,竖屏) 。
- 分辨率
多媒体查询语法
多媒体查询由多种媒体组成,可以包含一个或多个表达式,表达式根据条件是否成立返回 true 或 false。
@media not/only mediatype and (expressions) {
css代码…;
}
如果指定的多媒体类型mediatype 匹配当前的设备类型,则查询结果返回 true,文档会在匹配的设备上显示指定样式效果。
多媒体类型
screen 计算机屏幕(默认值)(常用)
tty 电传打字机以及使用等宽字符网格的类似媒介
tv 电视类型设备(低分辨率、有限的屏幕翻滚能力)
projection 放映机
handheld 手持设备(小屏幕、有限的带宽)
print 打印预览模式 / 打印页(常用)
braille 盲人用点字法反馈设备
aural 语音合成器
all 适合所有设备(常用)