响应式布局详解

一、响应式布局是什么？

响应式布局等于流动网格布局，响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。
在我看来，响应式布局更像是自适应布局的优化（自适应布局+流体布局），通过rem和媒体查询设置多个流体布局，可以实现更加合适的视觉效果，相比弹性布局有时候勉强的缩放显示也会更合适，响应式布局相比弹性布局却比较费劲。

二、原理

动态根据当前屏幕的宽度，自动改变页面中盒子的宽度、盒子的显示或隐藏。

三、细数有缺点

1.布局特点： 每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

2、设计方法： 媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
3.优点： ①适应pc和移动端，如果足够耐心，效果完美
②一套网页可以适配多个终端
③对于不同设备只需要开发一套网页即可，公司开发成本较低
**4.缺点：**① 一个页面需要兼容多个终端，考虑的情况多种，开发效率较慢
②代码会更多，网页的加载速度较慢
③媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。
④要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

四、响应式设计的步骤

①设置 Meta 标签

② 通过媒介查询来设置样式 Media Queries
Media Queries 是响应式设计的核心。

它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px，那么可以这样写：

大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个meta标签。

③设置多种试图宽度
假如我们要设定兼容 iPad 和 iphone 的视图，那么可以这样设置：

/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}

注意点：

页面布局最好采用液态布局（流式布局）
尽量少使用绝对的宽度，多用百分比
字体不要使用px写死，最好使用相对大小的em，或者rem

总结：

响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，特殊的点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式，流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载，静态的就是采用固定宽度的了。

流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少)；响应式是用于解决不用设备之间不用分辨率之间的兼容问题(一般是指PC，平板，手机等设备之间较大的分辨率差异)。