做网站的人常犯一个错：在电脑上看着挺漂亮，拿手机一打开，字挤成一团，按钮点不着，得用两根手指放大才能看清。用户没耐心，三秒就关了。

响应式网站解决的就是这个问题。同一套代码，屏幕大就宽着排，屏幕小就窄着来。听着玄乎，做起来就那几件事。

第一步，先把“固定宽度”戒了。

新手最爱写`width: 960px`。一写就死。改成百分比，`width: 100%`，或者用`max-width`。图片也一样，加一句`max-width: 100%; height: auto;`，图片就不会撑破手机屏幕。

第二步，加一行meta标签。

在HTML的head里放这句：``。没这行，手机浏览器会假装自己是台电脑，把整个页面缩成一张小图。有了它，页面才按手机的真实宽度来排版。

第三步，用媒体查询分档。

别搞几十个断点，那是自找麻烦。三个就够：手机、平板、桌面。写法很简单：

css
/ 默认手机样式 /


.box { width: 100%; }


/ 屏幕宽于768px时 /


@media (min-width: 768px) {


.box { width: 50%; }


}


/ 屏幕宽于1024px时 /


@media (min-width: 1024px) {


.box { width: 33.33%; }


}

先写手机的样式，再往大了改。这叫移动优先。反过来写也行，但改起来容易漏。推荐前者。

第四步，别用px定字号，用rem。

手机上14px的字看着还行，到了大屏就小得可怜。设个根字号：`html { font-size: 16px; }`，然后写`2rem`，正文写`1rem`。想整体缩放，改根字号一个值全动。省事。

第五步，导航栏要会变身。

电脑上横着排一排链接。手机上横不下，就折成汉堡菜单。用CSS加一点JS就能做，不必上框架。核心思路：小屏时把菜单藏起来，点按钮再展开。

第六步，拿真手机测。

浏览器开发者工具有个手机模拟，能用，但别全信。真机的字体渲染、触摸区域大小、刘海屏遮挡，模拟器看不出来。做完一定拿自己手机打开走一遍，手指点每个按钮，看能不能点中。

还有说个坑：别为了响应式去装一堆框架。Bootstrap能用，但一个简单企业站，手写几十行CSS就够了。框架体积大，改样式还得跟它的类名打架。先把手写练熟，再考虑用工具。

响应式不神秘。少写死值，多留弹性，拿手机试。做到这三点，网站就不会在用户手里散架。