前端进化史：从自适应页面设计到响应式页面设计-职坐标

前端进化史：从自适应页面设计到响应式页面设计

安安 2017-10-04 来源：网络阅读 1144 评论 0

摘要：起初，网页设计者都会为页面设计固定宽度，最开始的电脑显示器分辨率种类不多，因为当时电脑本来就少，即使有变化也是 800 850 870 880。

起初，网页设计者都会为页面设计固定宽度，最开始的电脑显示器分辨率种类不多，因为当时电脑本来就少，即使有变化也是 800 850 870 880。

后来随着显示器越来越多，以及笔记本的普及，这种方式的页面出现了问题。于是出现了一种新的布局方式宽度自适应布局。我们平时谈论的自适应布局，大多指的就是宽度自适应布局。

在这种布局下，出现了两派：

· 百分比宽度布局

· 流式布局

题主说的是第一派，宽度使用百分比，文字使用 em。第二派的布局以 iGoogle 为代表（已经停止）。

再后来，浏览器大战时代，firefox、Oparo、Chrome …… 出现，结束了 IE 一统江湖的局面，N 年没有更新的 IE6 发布了新版本，以前已 IE 为标准的 CSS 向 W3C 标准趋近，随后各种针对浏览器的 css hack 技术出现。

虽然浏览器这么多，但是响应式布局依然不是主流，人们还在使用 css hack 技术。注意我的用词——「不是主流」，虽然不是主流，不代表当时不被使用。

比如一向超前的伟大的 Google。当时没有响应式布局这个词语，但是慢慢出现了一个词——渐进增强，新词的出现总是伴随的旧词一起出现。就好比 3G 出现之前，没人管自己的手机叫 2G，所以，3G 和 2G 两个词是一起出现的（技术上当然2G技术先出现）。同理，渐进增强出现后，另一个词「优雅降级」也随之出现了。

词的意思可以自己看 wiki、Google，我只在这儿举一个例子，gmail 和 qqmail。

他俩的宽度都是 100%，都是自适应。但是：

qqmail 就是 css hack 的完美体现，你用任何一个浏览器，几乎可以看到同一个样子的邮箱，腾讯的前端工程师们用各种 css hack 技术来展示邮箱页面，为的是统一的用户体验。

而 gmail 使用了渐进增强，你的浏览器越强，你看到的效果就越好，用户体验就越好。

再后来，就是大家都熟知的 Google 发布了 android，于是互联网大战从 PC 打到了手机。还有 HTML5 标准的发布。

手机虽然屏幕变小了，但是却提供了更丰富的功能。还记得以前用诺基亚上 QQ 的事儿吗？我们访问的是 3g.qq.com，当时我使用的是中兴的手机，访问 wap.qq.com，在后来的职能手机都是访问 m.qq.com。

不禁有人问「真的需要为每个手机分别设计一个网页吗？」、「真的需要为手机和电脑设计不同的网页吗？」，解决方法当然有很多种，可以看看 css zen garden 相信做过前端的都看过这个网站，一个神奇的网站。

最终的解决方案胜出者是响应式布局。

响应式布局被大家熟知的一个重要原因就是 twitter 开源了 bootstrap。Google 第一次完成了从先驱到烈士。

---------------- 番外篇 ------------

Google 为了解决 android 界面的不统一问题，决定对 android 界面的设计进行规范，这种设计会让 android 变得更流畅，因为它放弃了 iOS 系统那种华丽的界面，iOS7 发布后，Google 完成了第二次从先驱到烈士。

android 开创了扁平化的时代，现在却被指责 android 的图片越来越抄袭 iOS 了。