打开电脑，网页排版整齐罢了。换到手机，字小得要放大，按钮挤成一团。这就是没做响应式的后果。

响应式没那么玄乎。一句话：同一个网页，在不同屏幕上都能正常看。今天从零讲一遍，照着做就行。

第一步，加一行代码

每个网页的head里，加上这行：

没它，手机浏览器会把网页当成电脑页面缩小显示。加了它，页面宽度才等于手机屏幕宽度。这是所有工作的前提。

第二步，别写死宽度

新手最常犯的错：给盒子写width: 960px。电脑上没问题，手机上直接溢出。

改成width: 100%，或者用max-width: 960px。意思是：最宽960，屏幕窄了就自动缩。图片也一样，加一句img { max-width: 100%; }，图片就不会撑破屏幕。

第三步，用媒体查询换布局

电脑上并排三列，手机上挤三列没法看。这时用媒体查询：

@media (max-width: 768px) { ... }

括号里写条件，花括号里写手机上的样式。比如电脑上三列，768px以下改成一列。写的时候从大屏幕往小屏幕写，逻辑最顺。

断点不用多。768px（平板竖屏）和480px（手机）两个就够用。别照搬网上的十几档断点。

第四步，字体和间距跟着调

电脑上18px的字，手机上够看。但大在手机上可能撑出屏幕。用rem做单位，根字号跟着屏幕变，自然缩。间距也一样，手机上的边距别照搬电脑的。

第五步，测试

写完别只在电脑上缩窗口看。用手机真机打开，横竖屏都转一下。重点看三处：图片有没有溢出，按钮手指能不能点准（至少44px高），文字会不会挤成一条线。

几个容易踩的坑

一是忘了加viewport，前面说过了。二是用了绝对定位又不改，手机上元素叠在一起。三是表格直接搬，手机上横向滚动。表格在手机上要么改成卡片式，要么允许横向滚动。

末了说说一句：响应式不是做完就完事。每加一个新模块，都拿手机看一眼。养成习惯，比事后返工省事得多。