响应式布局
概念
响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局
布局特点
响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+自适应
布局。分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局
和自适应布局设计理念的融合。由于浏览器的宽度的增加或减小，响应式布局可以像流式布局一样灵活伸缩。如果浏览器在固定的宽度之间来回切换，页面元素依然可以根据media query里样式的指引做出动态改变。
每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
设计方法
媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
移动端优先策略
典型的响应式布局通常都是采用手机端优先的策略。也就是说设计最初永远是先满足于手机端，然后随着浏览器宽度增加逐渐适应平板和桌面，因此设计者就只需要找到方法去扩展手机端的布局就好了。这样是为了从整体上创建一种比较
好的用户体验，因为从手机端到桌面端的扩展要比从桌面到手机屏幕容易的多。
注意
响应式页面在头部会加上这一段代码：
<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">
|
优点
-
适应pc和移动端，如果足够耐心，效果完美。
缺点
-
媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。
-
要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。