响应式布局（responsive web design）指的是在网页开发过程中针对不同设备开发一套网站，然后根据用户行为
以及设备环境（系统平台、屏幕尺寸、屏幕定向等）自适应地显示不同布局。
响应式布局的核心是媒体查询。媒体查询（media query）是获取用户行为和设备环境、然后提供相应的css规则的过程的简称。
媒体查询让css可以更精确作用于不同的媒体类型和同一媒体的不同条件。
基本语法
<!--link元素中的CSS媒体查询-->
<link rel="stylesheet" media="(max-800px)" href="example.css" />
<!--样式表中的CSS媒体查询-->
<style>
@media (max- 600px){
.facet_sidebar{
display:none;
}
}
</style>
媒体特性 取值 简介
width 定义输出设备中的页面可见区域宽度
height 定义输出设备中的页面可见区域高度
device-width 定义输出设备的屏幕可见宽度
device-height 定义输出设备的屏幕可见高度
orientation (portrait landscape) 方向（肖像，景观） 定义'height'是否大于或等于'width'.portrait是，landscape否
aspect-ratio 定义width与height的比率
device-aspect-ratio 定义'device-width与device-height'的比率
color 定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0
color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0.
resolution 定义设备的分辨率，如96dpi, 300dpi,118dpi
类型 解释
all 所有设备
screen 彩色电脑屏幕
print 文档打印或打印预览模式
projection 项目演示，比如幻灯
handheld 手持设备
speech 演讲
tv 电视
tty 固定字母间距的网格的媒体，比如电传打字机
braille 盲文
embossed 盲文打印
@media all and (min-800px) 所有最小水平屏幕宽度为800像素的屏幕应用规则
@media(min-800px) 简写方式，同上
@media(min-800px)and(max-1200px) 所有介于800px与1200px之间的屏幕应用规则
@media(min-800px)or(orientation:portrait) 宽度至少是800像素或方向是纵向的，则会应用该规则
@media(not min-800px) 当最小宽度不是800像素时，会应用下列css规则
@media(800px)and(height:400px) 当屏幕正好是800像素宽，400像素高时应用规则
@media(min-700px),handheld and (orientation:landscape) 最小宽度为700像素，或是横屏的手持设备上，同时应用样式
媒体查询解析--屏幕尺寸
老智能机：320px-280px
智能手机：>=480px
平板电脑：>=768px
中等屏幕（桌面显示器）：>=992px
大屏幕（大桌面显示屏）：>=1200px
实现过程，遵循移动有限原则
/*超小屏幕（手机，小于768px）*/
/*没有任何媒体查询相关的代码，移动设备优先*/
/*小屏幕（平板，大于等于768px）*/
@media(min-768px){...........}
/*中等屏幕（桌面显示器，大于等于992px）*/
@media(min-992px){...........}
/*大屏幕（大桌面显示器，大于等于1200px）*/
@media(min-1200px){...........}