【CSS-task13】响应式的优点与缺点？

分享人：赵灵杰

1.背景介绍

随着3G-4G的普及，越来越多的人使用手机上网。

                手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。

                响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

2.知识剖析

实现方法？

1、设置屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。（meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"）

 2、不固定宽度。

3、相对大小的字体。

 4、流动布局。

5、选择加载CSS。

6、CSS的@media规则。（ 举例如下：

     @media screen and (min-width:1000px){...}              对应PC端页面;

     @media screen and (max-width:1000px) and (min-width:768px) {...}        对应平板端页面;

     @media screen and (max-width:768px){...}           对应手机端页面;）

.优点

1，同样的布局，却可以在不同的设备上有不同排版，这就是响应式最大的优点，在分辨率不同，设备环境进行一些不同的设计，所有开发维护和运营上，相对多个版本成本会降低很多

2,兼容性好

3,方便改动，响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。

缺点

1.页面加载的代码多了，导致文件增大，影响加载速度

2.在响应式设计中，图片、视频等资源一般是统一加载的，这就导致在低分辨率的机子上，实际加载了大于它的显示要求的图片或视频，导致不必要的流量浪费，影响加载速度；

3.局限性，对于响应式，局限性较大，不适合一些大型的门户网或者电商网站，一般门户网或电商网站一个界面内容较多，而响应式最忌讳较多内容，代码过多会影响运行速度 

扩展思考

如何区分响应式和自适应？

响应式和自适应的区别http://www.mizuiren.com/391.html

.参考文献

http://www.5icool.org/a/201309/a2517.html

http://www.cnblogs.com/sy123456/p/5653915.html

更多讨论

响应式在web布局中有多重要？

鸣谢