CSS多媒体查询

多媒体查询

媒体查询可用于检测很多事情，例如：

1. viewport(视窗) 的宽度与高度
2. 设备的宽度与高度
3. 朝向 (智能手机横屏，竖屏) 。
4. 分辨率

多媒体查询语法

多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

@media not/only mediatype and (expressions) {
             css代码…;
}
如果指定的多媒体类型mediatype 匹配当前的设备类型，则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。

多媒体类型

        screen                 计算机屏幕（默认值）(常用)
        tty                        电传打字机以及使用等宽字符网格的类似媒介
        tv                         电视类型设备（低分辨率、有限的屏幕翻滚能力）
        projection            放映机
        handheld             手持设备（小屏幕、有限的带宽）
        print                     打印预览模式 / 打印页(常用)
        braille                   盲人用点字法反馈设备
        aural                    语音合成器
        all                        适合所有设备(常用)