先看一个数：超过一半的流量来自手机啊。网站电脑上好看、手机上稀烂，等于把一半人赶走。响应式就是一套代码适配所有屏幕，不用单独做手机版。

开工前定一件事：断点。别照抄别人的768、1024，打开统计看你的用户都用多宽的屏，挑几个集中的宽度当分界。一般手机竖屏、平板、桌面三个档够用了。

写CSS，先写手机样式，再往大屏加。这叫移动优先。原因很简单：手机样式最简单，往上加规则比往下删容易。用`@media (min-width: 768px)`这种写法，从小到大一层层叠。

布局别用固定宽度。`width: 100%`配`max-width`，容器撑满小屏、卡住大屏。多列布局用Flexbox或Grid，它们会自己换行、自己分配空间，比浮动(float)省心一百倍。卡片列表用Grid的`auto-fit`，一行能塞几个塞几个。

图片是重灾区。加`max-width: 100%; height: auto;`，图就不会撑破容器。再进一步用`srcset`给不同屏幕配不同尺寸的图，手机别下三千像素的大图，流量和速度都受不了。

字体也别写死像素。正文用`1rem`起步，用`clamp()`做流式缩放，比如`clamp(1.5rem, 4vw, 2.5rem)`，屏幕越宽字越大，但有个上下限，不会大到离谱。

导航是常见难题。手机屏幕窄，横向菜单塞不下。简单做法：小屏收进汉堡按钮，点开弹出竖向菜单；大屏直接横向铺开。用媒体查询切换两套样式就行，别搞复杂。

触控和鼠标不一样。按钮、链接的点击区域至少44像素见方，手指点得中。别把可点的东西挨太近，容易误触。

测试别只拖浏览器窗口。窗口缩放看不出真问题。用开发者工具的设备模拟先过一遍，再拿真手机试。重点看三样：有没有横向滚动条、文字会不会溢出、按钮好不好点。有横向滚动条，八成是某个元素宽度超了，挨个排查。

末了说记住一条：响应式不是做完就完事。加新组件、改新样式，每回都在小屏上过一眼。这个习惯养成了，网站才不会越改越歪。