先说结论：响应式不是高科技，核心就一句话——同一份代码，屏幕大就横着排，屏幕小就竖着排呗。

第一步，加这行标签，不加手机上全是缩小版网页：

``

第二步，别写死宽度。`width: 100%` 比 `width: 960px` 靠谱。图片加 `max-width: 100%; height: auto;`，图就不会撑破手机屏。

第三步，布局用 Flexbox 或 Grid。导航栏横排，手机上自动换行，几行 CSS 搞定：

.nav { display: flex; flex-wrap: wrap; gap: 16px; }

第四步，媒体查询。断点别照搬教程，看在哪挤了就在哪断。常用 768px 和 1024px 就够：

@media (max-width: 768px) {
.nav { flex-direction: column; }


}

第五步，字号用 `rem`，别用 `px`。用户调大字体，页面跟着变。

第六步，手机上记得放大点击区域。按钮最小 44×44 像素，手指不是鼠标。

第七步，真机测。浏览器缩窗口只是热身，拿手机刷一遍才知道哪崩了。Chrome DevTools 的设备模拟够用。

常见坑：横向滚动条。多半是某个元素超宽，加 `overflow-x: hidden` 治标，找到元凶治本。另一个坑是字体太小、行距太挤，手机上看眼睛疼。正文 16px 起步，行高 1.5 以上。

还有一句：响应式做得好的标准不是“能看”，是“不用放大也能点、不用横滑也能读”。做到这两点，就及格了。