# 响应式布局之媒体查询
    ## 一、什么是响应式布局？
    响应式布局指的是在同一个页面适用于不同的屏幕尺寸下有不同的布局。
    传统的开发方式是pc端开发一套，移动端开发一套就够，缺点css比较重要。

    ## 二、响应式布局的实现方案——媒体查询
    css3 Media Query(媒体查询) @media可以根据不同的屏幕尺寸设置不同的样式，页面布局分别适应于pc端，移动端等，在调整浏览器的大小时，页面会根据媒体查询的宽度和高度来重新布置样式。
    媒体查询可以用于自动检测很多东西：自动检测viewport(视图窗口)的宽度和高度；设备的宽度和高度：旋转方向(智能手机横屏或竖屏)；分辨率大小。

    ## 三、css3语法规则
    (一) 直接写在css样式表中。
    @media mediatype 操作符 (media feature) { CSS-Code }
    1. 如何理解@media的语法规则：
    - 使用媒体查询必须以@media开头；
    - 然后指定设备类型(媒体类型 mediatype)；
    - 接着是括号()里面是规定媒体/设置特征(media feature),媒体特征的书写格式与css样式类似，都是属性名:属性值(例如：max-width: 500px)；
    - 最后跟着的是大括号{ css-code }，里面放的是要设置的css样式。
    2. 逻辑运算符
    - not 用来排除某种设备/和当前条件进行取反。
    例如：排除打印设备 @media not print;
    条件取反： @media not and (max-width:500px);
    - and 媒体查询中使用来连接多种媒体特性，一个媒体查询中可以包含0或多个表达式，必须条件表达式都满足的情况下才执行样式表。
    - “,” 媒体查询中使用来连接多种媒体特性，一个媒体查询中可以包含0或多个表达式,条件表达式只要满足一个即可执行样式表。
    - only：用以指定某特定媒体设备。
    3. css媒体类型 MediaType
    - all ：适用于所有的设备类型。
    - print ： 适用于打印机和打印预览。
    - screen： 适用于电脑屏幕，平板电脑，智能手机等。
    - speech： 适用与屏幕阅读器。