响应式网站布局的优缺点分析

关于响应式网站，想必大家已经非常熟悉。通俗的解释就是使用CSS媒体查询技术，写一套代码，可以在多个终端上使用。在此之前，前端切图工作者是需要分别针对电脑端、移动端和平板等常见设备专门去写一套代码的，工作量相对较大。但是，千万不能以为响应式是最佳的解决方案，事实上响应式只是一个折中的技术解决方案，他在为我们带来便利性的同时，也存在很多其他问题。接下来，本文就详细的分析响应式布局的优缺点。

一、响应式布局的优点

1、开发效率高

虽然也有人说响应式开发成本较高的，但是要看相对参照，响应式的页面开发，总归是要比单独针对电脑端和移动端分别开发更容易一些的。

2、维护方便

在维护的时候，响应式布局只需维护一套代码，而单独的移动端和电脑端，甚至还有平板，则需要维护多套代码。

3、不同分辨率下显示灵活

至于有人说在不同分辨率下显示灵活性强，我觉的这点本身就是响应式存在的意义，因此不需要说，而且也存在很多替代方案。

二、响应式布局的缺点

1、代码量冗余

比如说，单独的电脑端和移动端，在使用某一终端的时候，只需要加载其中一套代码即可，但是响应式实际是把所有的代码放在一起的，这样的结果就是在访问电脑端的时候，实际上加载的还是全部的样式、图片、html框架文件，代码量较冗余，每次加载文件体积较大。

但是有句话说的好，抛开剂量谈危害，是耍流氓。在目前网络带宽越来越高的情况下，多加载几十几百KB的文件，对用户几乎是无感的，所以这点其实算不上什么大的缺点。除非是网站的访问量特别大的情况下。

2、个性化度较低

众所众知，响应式是所有的终端使用了同一套HTML代码，然后通过媒体查询方式，修改布局，部分元素在某个终端下进行隐藏或显示处理的。这样势必会造成的一个结果就是，电脑端和移动端的模块几乎是一致的，从而导致想要在某一终端下想要做更加个性化的操作就不是很容易，当然不是说不可以，只是略显累赘。

3、加载统一资源

比如说电脑端的轮播Banner图，我们一般都会使用精度比较高，显示清晰的1920像素宽度的图片，但是在移动端的时候，再使用这么精细的图片，肯定不是最佳解决方案。当然也可以通过css填充背景的方式来加载不同资源，但是这种操作较为猥琐，一般不用。

4、用户体验一般

以上几点共同决定了响应式在用户体验方面，是逊色于各终端独立开发的。

5、SEO可能稍有影响

另外，有人说响应式布局的SEO效果会比单独版本的高一些，但是这点其实并没有多少案例和数据支撑，在移动端适配方面，目前看来影响应该是微乎其微。百度的站长搜索资源平台，也有移动端适配类型的设置，如果您的移动端和电脑端是分开的，那么选择【有对应PC站的移动站】即可，如果是响应式的，直接选择【自适应】即可。目前很多的搜索引擎在移动适配这块基本都能设置响应的规则，因此，响应式对SEO的影响，见仁见智，笔者觉的单从这块讲的话影响微乎其微，可以忽略不计。

作为一个前端从业者，我们知道，在做例如列表页这类页面时，表面上我们可以把侧栏（如子栏目列表）放在页面右侧，主体内容放在左侧。但其实在html代码中，为了优化SEO，其实主体内容是靠前的。这在电脑端页面中是可以通过浮动来轻易实现的。但是在移动端时，子栏目列表等信息和主体内容，在排版上一般都是上下排布，这种在html代码中，则就需要保持一致。当然，这块算是一点点小的影响，但影响也是非常轻微的。

具体可在：百度搜索资源平台 → 站点管理 → 搜索展现 → 站点属性 → 站点类型 中进行设置。

三、什么时候选择响应式布局

那么，到底该选择响应式布局，还是各自对应的版本呢？我觉的主要有两方面的考虑。

1、公司规模

一般而言，我们建议大多数的公司使用响应式布局的方式进行开发，但是如果你的公司是集团公司或规模较大的公司，那么建议分开处理。

2、网站流量 

如果你的网站有非常大的访问流量，或者预期流量，那么建议使用独立的移动端和电脑端。一来用户体验更好一些，二来节省服务器带宽，可降低运维成本。

3、预算充足

另外就是，如果您有充足的预算，还是更建议使用各端分离的设计和开发模式。因为这样会带来更好的用户体验。当然就眼下这经济形势，有钱的企业也在开源节流，精简成本。

除了以上几点情况之外，开发时使用响应式布局的开发模式，似乎更好一些，见仁见智。本文主要从主观方面浅谈响应式布局开发过程中存在的优缺点，仅供大家参考。