先写手机版，再放大到电脑啊。这个顺序别搞反。

很多人做网站，习惯先拖一个宽屏布局，最后呢再想办法塞进手机。结果媒体查询写了几十个，代码乱成麻。换个路子：把浏览器窗口缩到最窄，先保证小屏幕能看、能点、不挤。然后慢慢拉宽，宽到哪一步布局变了，就加一条断点。断点不是越细越好，两三个就够，常见的是768像素和1200像素。

布局别用固定宽度。`width: 960px`这种写法直接扔掉。换成百分比、`fr`单位，或者`max-width`配`margin: auto`。图片加一行`max-width: 100%; height: auto;`，基本就不会撑破容器。字体用`rem`，别用`px`定死，用户调大字号时页面还能跟着走。

导航栏是最容易翻车的地方。电脑上一排横着的链接，到了手机上横不下。两个选择：要么折成两行，要么收进一个按钮里。收起更常见：一个汉堡图标，点一下展开菜单。用纯CSS也能做，一个隐藏的checkbox加`:checked`选择器，不用写JS。嫌麻烦就写几行脚本，切换一个class，别搞框架。

别依赖鼠标悬停。手机上根本没有hover这回事。所有靠`:hover`展开的下拉菜单，在触屏上都是废的。改成点击触发，或者直接把摊开摆着。同理，按钮和链接的点击区域别太小，手指头没那么准，留出至少44像素见方。

测试方法很土但管用。写完一版，打开浏览器开发者工具，切换到手机模拟模式，从iPhone SE到iPad挨个过一遍。重点看三件事：有没有横向滚动条、文字有没有被截断、按钮能不能点中。看到问题就回去改代码，别用`overflow: hidden`把毛病藏起来。

最后呢说一句实话：响应式不是加几条媒体查询就完事。它是个习惯——写每一条样式之前，先想一下窄屏幕下会怎样。养成这个习惯，后面的活就顺了。