先写手机版，再写电脑版啦。很多人反过来，先做宽屏布局，再想办法塞进小屏幕，结果全是补丁。正确做法是从窄屏开始，一行一行往下堆，宽屏时再加列。这叫移动优先，省事。

HTML里加一行：``。不加这行，手机上字小得像蚂蚁。加完，浏览器就知道按设备宽度来排版。

布局别用固定像素。宽度用百分比，或者`max-width`。比如区写`max-width: 800px; width: 100%;`，大屏不撑满，小屏自动缩。高度别写死，让自己撑开。

图片加一句`max-width: 100%; height: auto;`。图片就不会撑破容器。再省事点，用``给不同屏幕配不同尺寸的图，手机不用下载大图。

字体别用`px`写死。正文用`1rem`，根字号跟着系统走。用`em`或`rem`，缩放时整体协调。行高写`1.5`左右，别写死像素。

媒体查询是核心，但别滥用。常见断点两三个就够：手机默认一套，`min-width: 600px`加一列，`min-width: 900px`再加侧栏。断点跟着走，不是跟着设备走。挤了就加断点，别抄一堆标准值。

导航栏最容易翻车。手机上用汉堡菜单，别硬塞横向列表。实现很简单：一个按钮切换`display`，加`aria-expanded`给读屏软件。别搞花哨动画，点开能用就行。

表格和长代码块单独处理。外面套个`overflow-x: auto`的容器，横向滚动，别让整页跟着撑宽。

测试别只看模拟器。真机上手滑一遍，尤其是拇指够不够得着按钮。按钮最小44像素见方，间距留够。模拟器测不出手指粗。

最后呢检查三样：横屏能不能用，字号调大后会不会崩，没网时页面骨架还在不在。这三关过了，基本能上线。

响应式不是一套代码通吃所有设备，是让在哪都读得下去。少用框架，多看真机，比啥教程都管用。