前端响应式布局原理与方案（详解前端响应式布基础知识）

一、背景介绍

随着智能手机的迅速发展，大众群体使用手机访问互联网的频率已经大大提升，手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事，传统的只能在pc端显示的网页，如何适应这个潮流，也成了人们开始关注和解决的问题。于是响应式布局的概念就被提出来了。

二、什么是响应式布局

响应式布局简而言之，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。

三、响应式布局的优点

1、响应式设计可以向用户提供友好的Web界面，同样的布局，却可以在不同的设备上有不同排版，这就是响应式最大的优点，现在技术发展日新月异，每天都会有新款智能手机推出。如果你拥有响应式Web设计，用户可以与网站一直保持联系，而这也是基本的，也是响应式实现的初衷。

2、跨平台和终端且不需要分配子域名

3、面对不同分辨率设备灵活性强

四、响应式布局的缺点

1、为了适配不同的设备，响应式设计需要大量专门为不同设备打造的css及js代码，这导致文件增大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长，影响页面加载速度，其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果。

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

3、移动端和电脑端的很多交互组件差异比较大，例如：日期选择控件，电脑端更多的是弹出选择控件，移动端是picker选择，响应式布局很难做到在不同平台使用不同的交互组件

4、电脑端的生态比较单一，一般只需要考虑各个浏览器兼容就行，但移动端的生态就比较丰富，移动端h5页面，微信公众号h5，小程序内h5，对各生态的api功能对接上，一套代码里需要通过大量的代码去判断不同生态分别走不同的程序分支，这对于代码的维护提出了极高的要求

五、适合做响应式布局的应用

内容型及资讯型网站，很适合响应式的布局，例如官方网站，新闻资讯网站，审批类网站，此类网站主要用于内容浏览及确认，用户交互比较少，只需要根据不同屏幕尺寸调整页面内容展示

六、不适合做响应式布局的应用

大型门户、电商网站、后台管理应用不太适合响应式布局，因为响应式设计的基本原则是不会因设备不同而给予用户不同的内容（比如在低分辩率设备上删减某些内容），而这些网站的单页内容非常多，当缩减到低分辨率设备上，又要保证内容全部可浏览时，必然导致页面拉长，浏览难度增加，所以很多大型门户或电商网站都会提供一个移动设备版的网站，或者干脆直接让用户缩放网页进行浏览。为不同的设备提供优化的浏览体验，这个肯定是网站开发所追求的目标，也是网站技术发展的趋势。但响应式设计只是实现这一目标的其中一个手段，只适用于某些类型的网站，不可一概而论