编辑导语：如何为一款产品制定合适的界面规则？随着产品的迭代更新，作为设计师，则更需要在了解产品特性的情况下、设计出合理且有效的界面布局。本篇文章里，作者就对web产品设计适配选型做出介绍，并提出了他的看法。

一、开篇

现如今，几乎所有的网页设计都要进行响应式和自适应设计，才能让产品能够覆盖到更多终端。接手一个产品设计的初期，制定界面适配规则时，你是否也有过如下疑问：

• 宽度单位我是用百分比还是px？还是rem？区别是什么？
• 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度、设备像素、CSS像素？浏览器窗口大小和设备大小和分辨率大小区是什么区别？
• 什么是响应式网站，自适应又是什么？两者有何区别和联系？
• 百分比宽度布局和流式布局和前者的关系是什么？
• 既然响应式这么流行，为何淘宝、京东等没有去做，而是单独开发了一个移动端版？这里面有那些坑需要避开？

二、历史长廊

在早期，硬件设备落后，网页使用的是绝对静态布局为主，绝对固定宽度的布局被称为是静态布局（Static Layout），也有叫固定布局（Fixed Layout）。

后随时代变迁，技术发展。因浏览器的增多，开发者们忙于兼容各种浏览器。在这个期间，实际已经有了针对各设备适配的解决方案，只是未成为主流，这种新布局方式叫自适应布局（Adaptive Web Design，简称AWD）。

在当时，大多指的就是宽度自适应布局。

在这种新思想下，又出现了两派的具体解决方案：百分比宽度布局和流体式布局（Fluid Layout）。

在当时，大家都还没有响应式布局的概念，但此时出现了一个新的词——渐进增强。渐进增强出现后，另一个词优雅降级也随之出现了。这里只是举个典型的例子：Gmail和QQmail。这两个都是百分比宽度布局，都属于自适应布局，但有区别。

QQmail就是CSS hack的完美体现。你用任何一个浏览器，几乎可以看到同一个样子的邮箱，为的是用户体验统一。

Gmail则使用了渐进增强，你的浏览器越新越强，你看到的效果就越好，为的是用户体验增强。再后来，Google发布了Android，移动互联网爆发，html5标准发布。

互联网大战从PC打到了手机。手机虽然屏幕变小了，但是却提供了更丰富的功能。用户要求不断提高，网站更加看重的是用户体验了。

所以，谷歌式的渐进增强被广泛认可。结合自适应的思想，出现了响应式布局（Responsive Web Design）的概念——2010年由Ethan Marcotte提出。

描述响应式界面最著名的一句话就是“Content is like water”——无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。

现如今，为何需要考虑多设备的兼顾呢？依然是因为时代发展与生活方式的变迁：

• 即便是PC或Mac用户，调查显示只有一半的人会将浏览器全屏显示，而剩下的一般人使用多大的浏览器，很难预知；
• 台式机、投影、电视、笔记本、手机、平板、手表、VR……智能设备正在不断增加，“主流设备”的概念正在消失；
• 屏幕分辨率正飞速发展，同一张图片在不同设备上看起来，大小可能天差地别；
• 结合自身产品用户访问浏览器分辨率；
• 鼠标、触屏、笔、摄像头手势……不可预期的操控方式正在不断出现。

因此我们需要在了解基本布局方式的特征下，选择适合自身产品的布局实现方式。

三、布局方式对比

静态式、自适应、流体式、响应式布局，A+R混合布局的特点对比如下。