CSS3 多媒体查询

css2 @media 可以针对不同媒体类型可以定制不同的样式规则

例如：我们可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则

但是这些多媒体类型在很多设备上支持还不够友好

CSS3 多媒体查询

CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想：

取代了查找设备的类型，CSS3 根据设置自适应显示

媒体查询可用于检测很多事情

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

目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询

浏览器支持

下表中的数字表示支持该属性的第一个浏览器的版本号

多媒体查询语法

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

@media not|only mediatype and (expressions) {
    CSS 代码...;
}

如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果

除非我们使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果

• not: not是用来排除掉某些特定的设备的，比如 @media not print (非打印设备)

• only: 用来定某种特别的媒体类型

  对于支持 Media Queries 的移动设备来说，如果存在 only 关键字，移动设备的 Web 浏览器会忽略 only 关键字并直接根据后面的表达式应用样式文件

  对于不支持 Media Queries 的设备但能够读取 Media Type 类型的 Web 浏览器，遇到 only 关键字时会忽略这个样式文件

• all: 所有设备，这个应该经常看到

我们也可以在不同的媒体上使用不同的样式文件

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 多媒体类型

多媒体查询简单

使用多媒体查询可以在指定的设备上使用对应的样式替代原有的样式

下面的范例中在屏幕可视窗口尺寸大于 480 像素的设备上修改背景颜色

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

下面的范例在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧

@media screen and (min-width: 480px) {
    #leftsidebar {
        width: 200px;
        float: left;
    }

    #main  {
        margin-left:216px;
    }
}