你不知道的css各类布局（四）之响应式布局

响应式布局

概念

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局

布局特点

响应式设计的目标是确保一个页面在所有终端上（各种尺寸的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和移动端，如果足够耐心，效果完美。

缺点

• 媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。

• 要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

参考

静态布局，流式布局，自适应布局和响应式布局

布局的几种方式（静态布局、自适应布局、流式布局、响应式布局、弹性布局）

响应式布局和自适应布局详解