手机打开网页，字小得看不清。得用两根手指放大，再左右拖。烦不烦？这就是没做响应式。

响应式网站，说白了就一句话：同一个网址，电脑、平板、手机打开，都好看，都好用。

怎么做？下面讲流程。

第一步，先想好。

别急着写代码。拿张纸，画三个框。一个代表手机，一个代表平板，一个代表电脑。然后问自己：手机上最该看见什么？是电话号码？是购买按钮？还是文章？想清楚，再动手。

第二步，定断点。

断点就是屏幕宽度到多少时，布局变一下。常见三个：手机小于768像素，平板768到1024，电脑大于1024。别贪多，三档够用。新手搞五六个断点，自己都乱。

第三步，搭骨架。

先做手机版。为什么？因为手机屏幕最小，最挤。从最挤的开始，加东西才不慌。写HTML结构，用简单标签。别一上来就搞复杂框架。

第四步，写基础样式。

不加媒体查询。先让手机版能看。字够大，按钮够点。手指点得中，不打架。最小点击区域44像素见方。这是死规矩。

第五步，加媒体查询。

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

@media (min-width: 1024px) { ... }

里面改什么？改布局。手机是竖着排，平板可能两列，电脑三列。改宽度。图片从100%宽，变成固定尺寸。改字号。稍微大一点。

第六步，图片和文字。

图片用max-width: 100%。别固定宽度。文字别用绝对单位，用rem或em。手机上看12px字？太瞎眼。至少16px。

第七步，测试。

别只在自己手机上试。找不同牌子的手机。安卓、苹果都要看。电脑浏览器拉窄，看断点跳得顺不顺。重点测三样：导航菜单、表格、图片。这三个最容易崩。

第八步，修。

发现字重叠？改。按钮跑出屏幕？改。表格挤成一团？改成卡片式。别怕麻烦。响应式就是反复调。

最后，记住几个坑。

别用固定宽度。别用绝对定位做布局。别以为电脑上好看就完事。手机用户超过一半。你不管手机，等于赶客。

还有，别用“自适应”和“响应式”混着说。自适应是好几套代码，响应式是一套代码。现在都做响应式。

做完上面八步，你的网站就能用了。电脑打开正常，手机打开也正常。不用再放大缩小。用户舒服，你也省心。

就这么简单。