做网站最怕什么？电脑上看着好好的，手机一打开，字挤成一团，图撑出屏幕，用户三秒就关掉。响应式就是解决这个问题的。

先说核心：别写死宽度。`width: 960px` 这种写法趁早扔掉，换成百分比或 `max-width`。比如容器写 `max-width: 1200px; width: 90%;`，大屏不撑满，小屏自动缩。

第二，加 viewport 标签。这行代码不写，手机上所有适配全白搭：

html

意思是让页面宽度跟着设备走，初始不缩放。

第三，图片要听话。给图片加 `max-width: 100%; height: auto;`，它会自己缩，不会横着溢出。背景图用 `background-size: cover`，裁一点总比变形强。

第四，媒体查询是重头戏。别搞几十个断点，三个够用：手机、平板、桌面。写法很简单：

css
@media (max-width: 768px) {


.nav { flex-direction: column; }


}

意思就是屏幕窄于 768px 时，导航从横排变竖排。断点值不用死记，看你的什么时候开始丑，就在那儿断。

第五，布局用 flex 或 grid，别用 float 硬凑。flex 默认就会换行、拉伸，配合 `flex-wrap: wrap`，卡片在小屏自动堆叠，省一堆媒体查询。

第六，字体也别固定。`font-size: 16px` 在大屏上偏小，可以试试 `clamp(16px, 2vw, 20px)`，字号跟着屏幕轻微浮动，读着舒服。

第七，测试别只缩浏览器窗口。窗口缩放和真机差别大，尤其是触摸区域。按钮至少 44px 高，手指点得中才算合格。Chrome 开发者工具的设备模拟够用了，有条件再拿旧手机实机看一眼。

还有说个常踩的坑：横向滚动条。九成是某个元素超宽了，给 `body` 临时加 `outline: 1px solid red` 挨个排查，或者直接 `overflow-x: hidden` 先兜住，再找根因。别一上来就 hidden，那是遮丑不是治病。

响应式没那么玄，就是让自己会弯腰。写完一段缩一下窗口，丑了就调，调完再缩。来回几次，站点就稳了。