要想彻底搞懂网页布局是怎么一步步进化到现在的样子，咱们得先看一段历史。早在互联网刚起步那会儿，大家伙儿用的电脑都不多，显示器分辨率也就那么固定的几种，像800×600这种规格就能覆盖所有情况。所以设计师为了省事，直接把网页宽度定死在960像素，两边各留10像素的边儿，中间的内容区也正好是940像素。 后来笔记本电脑越来越多了，屏幕大小五花八门。以前那套固定宽度的办法马上就不灵了，宽的显大窄的显小，触屏和非触屏设备也完全不一样。为了解决这个问题，“自适应布局”就出来了。其实核心思路特别简单，就是让页面宽度跟着屏幕宽度走，不再死守着那几个固定像素。 有的人喜欢用百分比宽度，比如说给 div 定个75%的宽度；还有的人走流式布局的路子，用浮动和min-width把元素切成“流”，屏幕再小也不会挤成一团。这两派人虽然理念不同，但目标都一样：就是为了减少维护成本，用一套 HTML 配合不同的 CSS 规则来搞定所有事儿。 那个时候还没什么“响应式”这个词呢，前端圈里流行的是“渐进增强”和“优雅降级”。拿 QQ 邮箱来说就是典型的渐进增强——低版本浏览器只能看个大概，高版本浏览器才能看到各种特效。而腾讯新闻客户端则用了优雅降级的方法，专门加了 CSS Hack 来保证在不同浏览器上显示一致，宁可牺牲高端机体验也要守住低端机的底线。 直到 Google 把战场从 PC 搬到了手机上，HTML5 和 Android 也都落地了，大家开始质疑：难道真的要为每种设备都做一套网页吗？ CSS Zen Garden 这样的实验性网站给出了答案：同一张 HTML 通过 Media Query 探测屏幕宽度，动态加载不同的 CSS，就能实现“一次设计，无限屏幕”。 这下大家都明白了，这就是响应式设计。其实它和自适应的最大区别就是：响应式布局会根据屏幕大小来动态调整布局和内容。比如说在手机上（屏幕宽度小于600像素），内容可能只有三行排列，导航还得收进汉堡菜单里；到了平板上（600到1300像素之间），主栏加边栏就能排成两行；要是遇到大屏幕（超过1300像素），那六张图片就能并排霸屏了。 想把理论变成代码也不难，总共就五步： 第一步先在 HTML 的 head 里加上 viewport 元标签，告诉浏览器“我要自适应”。要是遇到 IE6 到 IE8 这种老古董，还得再加个 polyfill 来兼容一下。 第二步就是在全局样式里禁用绝对宽度，给元素松绑让它能自由流动。记得把 box-sizing 设成 border-box 哦，这样 padding 和 border 才不会把元素撑大。 第三步把字体也换成相对单位，比如 body 的 font-size 设成16px 作为基准，h1 设成24px（就是1.5倍），small 设成14px（大概0.875倍）。 第四步用流式栅格系统来切块栏目。比如右边的主栏给它70%的宽度，左边的侧边栏就占25%的宽度。如果是小屏设备（不超过600像素），还得把这两块合并成单栏显示。 最后一步就是用 Media Query 按需加载样式。可以把小屏用的 CSS 文件和大屏用的文件分开来加载；也可以在一套 CSS 里用@media 规则来覆盖不同尺寸下的样式。