Duke Yin
Duke Yin
2014年8月18日

华尔街知名分析师玛丽·米克尔说：

今年5月来自于智能手机移动端的网页浏览量在总浏览量中占比达到25%，相比之下去年同期仅为14%。

很久以前，人们绝大部分都在电脑上网，屏幕分辨率无非也就那几种，而且最关键的是：大家都在用鼠标键盘参与网页互动，设计网站保证能在常见最小屏幕宽度完整呈现即可，大的屏幕就给两侧留白。

现在移动设备浏览网页越来越普遍，设计网页不得不考虑移动设备的屏幕。但手机平板屏幕尺寸跨度大，手机屏幕小的居然有320X240！所以按“最小来适应”这招不管用了，手机平板上也不能用鼠标了，改用手指或者按钮来触链接，触按钮。

然而如果一个网站做单独的手机版，要让人记一个桌面版的域名，再记一个移动版的域名，似乎也是不太合理和逆SEO的，所以聪明的射鸡狮们想出了“更好”的办法——响应式设计（Responsive Design）。

响应式设计其实没有名字那么玄乎，一句话解释就是“根据屏幕尺寸改变网页元素的样式”，而且仅CSS层面就能完成，比如按钮在桌面屏幕要小一点，在移动设备上适应手指操作，就大一点。使用响应式设计很好地解决了同一个网站在不同设备呈现和操作体验的问题。

一时间，响应式设计蔚然成风，大家都以网站用了响应式设计为荣，以不用响应式设计为耻。但是响应式就真的这么好吗？我认为不是。

“兼顾”还是“都不顾”

响应式的初衷就是兼顾各种尺寸屏幕，但是大部分网站桌面版需要呈现更多内容，而手机版则放不下太多的内容。响应式设计只是前端，只是改变了长宽颜色大小透明度…这些呈现方式，实质上的网站数据大小是不变的，即便隐藏了的某些元素，浏览的时候手机还是会将其下载。为了让手机下载的数据量更少，减少桌面版的元素量，或者为了保证桌面版丰富多彩，在手机版隐藏很多元素，都是拆东墙补西墙，掩耳盗铃的做法，到头来桌面版，移动版都顾及不了。

更何况，响应式需要在css里写很多规则，而且这些规则并不是那么智能，无论什么设备浏览都得加载，这无形中又增大了网站的尺寸，降低了打开速度。

目前的移动网络速度仍然很慢

打开一个网站需要耗费的时间长短无疑是最为重要的用户体验没有之一。响应式设计所考虑到的只是打开以后的问题，呈现得是否适应了你设备的屏幕，但是下载量几乎是束手无策的。试想一个600k的首页在桌面浏览器里300毫秒到500毫秒能打开似乎是可以接受的，但在移动或联通的EDGE网络估计得耗费10多秒甚至更多。移动3G和4G真的还不是那么普及和完善，不是大多数。在当前移动网络速度的大环境下，响应式设计完全是鸡肋。

图片问题

绝大多数响应式设计对于图片的处理方法是改变它的“显示尺寸”，这是一种就高不就低的处理方式，也就是在桌面版网页里1000像素宽的图片，在手机里虽然显示是640像素，但它为了保证桌面版不失真，这个图片仍然是1000像素的，只是被挤压了。也就是说，手机上下载了完全不需要的部分，进一步降低了打开速度。网上也曾有一些脚本可以控制让图片在低分辨率屏幕上自动裁切压缩，但是貌似目前还没有成熟的切出像样图片的案例。

单独设移动站仍然是最佳解决方案

虽然比较Old fashion，但是针对小屏幕单独做一套页面仍然是最佳解决方案。
这样一来，针对桌面版的丰裕带宽可以丰富内容 丰富元素，移动版则可以尽量精简；域名的问题现在也有很好的解决方法，根据UserAgent判断是加载哪一套页面也不是难事了。同一个域名，在不同设备上打开不同版本的页面，不加载多余内容，速度保证。

结论

响应式设计是很潮很酷，但是限于移动网络的网速，如果你的网站本身并非十分简洁，还是需要慎重考虑，或许将来某一日移动网速普遍大幅提升，设备性能大幅提升，加载个图片、渲染个样式已经毫无压力，响应式设计仍旧会是个好同志，但在目前，响应式设计仍然是可远观而不可亵玩的莲花。

@科技

本作品采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)进行许可.

赞赏
donate
感谢您的赞赏
接受支付宝及微信支付。

您的捐赠事迹将被永远铭记在此网站的鸣谢页面。