2013是自适应网页设计之年

写在前面

国外一些知名的科技媒体如Mashable, thenextweb最近都改版了，满满的填满整个屏幕，开始看还很不习惯，直到Mashable创始人撰文说他们采用了可适应网页设计（Responsive Web Design）（注：国内也译作“响应式网页设计”），而文章中也指出2013年将成为自适应网页设计之年。

所谓自适应网页设计，是由Ethan Marcotte在2010年提出的名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。简单来说就是同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout） 。

随着移动技术的普及，越来越多的人会通过不同的屏幕来浏览网页，2012年成为PC和mobile的分水岭，全球pc机的销售量低于移动终端。很多知名网站的流量都来自移动终端，比如mashable自己的流量就有30%来自移动终端，预计到2013年将会超过50%，可见，一个网站在提供pc机上良好的用户体验之外，还需要在不同的移动终端（PAD和智能手机）提供良好的网页浏览体验。这是自适应网页设计流行的前提之一。

2013年是自适应网页设计流行的第二点是，为了提供良好的用户体验，很多网站都制作了自己的APP，这不为一种好的方法，但这个成本也相对高昂，且推广也不是一件简单的事情，用户不会浏览一个网站就下载一个APP，根据Pew Research Center的数据显示，60%的平台电脑使用者还是更倾向于用浏览器来浏览网页而非App。

为了进一步让更多人了解这种趋势，我转了阮一峰先生的一篇老文，供感兴趣的研读。（by @puting）

自适应网页设计（Responsive Web Design）

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

移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？

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

很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。
于是，很早就有人设想，能不能”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？

一、”自适应网页设计”的概念

2010年，Ethan Marcotte提出了”自适应网页设计“（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。
他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。

如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。

如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。

如果屏幕宽度在400像素以下，则6张图片分成三行。