CSS3媒体查询也就是指@media 查询

媒体查询不需要像CSS3其他属性一样添加前缀。

@media 查询

使用 @media 查询，就可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同屏幕尺寸设置不同样式，特别是针对响应式页面。

当改变浏览器大小过程中，页面会根据浏览器的宽度和高度重新渲染页面。

CSS语法

    @media mediatype and|not|only (media feature){
        CSS-Code;
    }

也可以针对不同的媒体使用不同stylesheets：

    <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css" />

mediatype媒体类型

all 用于所有设备

print 用于打印机和打印预览

screen 用于电脑屏幕，平板电脑，智能手机等

speech 用于屏幕阅读器等发声设备

媒体特性

媒体特性书写方式为：

媒体特性:媒体特性指定值

1.最大宽度max-width

max-width指媒体类型小于或等于指定的宽度时，样式生效。

    @media screen and (max-width:480px){
        .aside{
            display:none;
        }
    }

上面表示当屏幕小于或等于480px时，侧边栏（.aside）将被隐藏。

2.最小宽度min-width

min-width指媒体类型大于或等于指定宽度时，样式生效。

    @media screen and (min-width:1200px){
        .nav{
            width:1000px;
        }
    }

上面表示当屏幕大于或等于1200px时，导航栏（.nav）宽度为1000px。

3.多个媒体特征使用

媒体查询可以使用关键词and将多个媒体特性结合在一起。一个媒体查询可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。

当屏幕在500px~900px之间时，body的背景色为金色，如下所示：

    @media screen and (min-width:500px) and (max-width:900px){
        body{
            background-color:gold;
        }
    }

4.设备屏幕的输出宽度Device Width

在只能设备上，可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样对于屏幕设备可以使用min/max对应参数。

    <link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

上述代码指“iphone.css”样式适用于最大设备宽度为480px。

5.not关键词

使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。 也就是说not关键词表示对后面的表达式执行反操作。

    @media not print and (max-width:1200px){样式代码}

上述代码表示：样式代码将被使用在除打印设备和设备宽度小于1200px下的所有设备中。

6.only关键词

only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。

only很多时候用来对不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：

支持媒体特性的设备，正常调用样式，此时可以认为only不存在；

不支持媒体特性但又支持媒体类型的设备，这样就会不读样式，因其首先读取only而非screen；

另外不支持Media Query的浏览器，不论是否支持only，样式都不会被采用。