有关如何区分响应式网站和自适应网站，可以参考之前的一篇文章：SiteServer CMS 如何实现响应式网站---原理篇。

今天想要讲的是响应式网站四个致命缺陷：

1、响应式站用户体验不能最优化

响应式网站设计基本原则是：自动识别屏幕尺寸并做出相应调整的网页设计，页面布局和展示的内容可能会随着屏幕尺寸变化而有所变化。响应式布局不管使用什么设备都是在服务器把数据推送到浏览器后，脚本或CSS自行检测设备屏幕大小后执行对应的样式表内容，并且一直通过本地脚本在监听屏幕大小的变化，随时做出样式响应的变化。

比如在1280x768分辨率的电脑屏幕上和在320x240分辨率的手机屏幕上显示一样的内容的话，内容都挤一起无法看清楚。所以响应式设计是选择把部分内容隐藏来解决这个问题。但这样的话页面的表现效果就不是那么好了，用户的交互体验也非常不友好。

比如下面这个响应式网站，右边移动端和左边电脑端相比，把产品展示模板隐藏了，这对用户体验是非常不友好的。而且左边明显不符合我们平常看到的移动端的设计。同一个网站PC端和移动端风格差异太大，感觉就是两个没有任何联系的网站。

如果是单独设计PC站和移动站，就能整体考虑规划，设计成一个整体风格类似功能相同的网站，避免像上面这种显示上的突兀，比如天猫PC站和移动站的对比：

从天猫的做法可以看到：移动站界面是大家熟悉的和流行的，交互上更接近APP的UI风格。

2、响应式设计并不利于SEO和推广

百度对移动站和PC站的关键词处理策略不尽相同。如果网站设计成响应式， 所有设备访问同一份代码，这就非常不利于百度关键词优化。

而且百度的搜索排名是区分移动站和PC站的。如果PC站和移动站是独立分开的，那么移动站所做的百度排名，不会影响PC站的排名，PC站的百度优化也可以独立于移动站进行。

从商业推广的角度来看的话，移动站和PC站分开单独做比设计成一个统一的响应式网站会更好。

3、响应式网站代码冗余，打开速度慢

响应式网站的实现原理通常是通过css或js来控制部分内容显示或不显示，从而使得网站在移动设备上看起来也正常。但通过代码不显示的内容其实依然还在页面上，只是表面看不见（不显示）了而矣，所以浏览器依然还会加载这部分看不见的网页代码。也就是说响应式网站要比单独的非响应式网站加载更多的数据，从而造成流量增加，而且网页的打开速度变慢。

比如说单独设计一个移动端网站，整个页面大小可能是100kb，如果设计成响应式网站（PC站和移动站代码合在一起）则页面大小可能就是400kb甚至更多。导致打开响应式网站的时间相比非响应式会慢很多，尤其是手机在用2G、3G网络上网的情况下更明显。

4、响应式兼容性差

响应式网站算是比较新的技术了，运用了很多html5的特性，只有浏览器的高版本才支持这些html5特性，尤其是微软的IE浏览器对这一块的支持比较弱。