很多所谓响应式网站，只是把电脑版的三栏在手机上摞成一栏，字号小得要用放大镜看，图片加载的还是桌面版大图。这不叫响应式，这叫等比缩小。
真正做好响应式，要考虑的是不同屏幕下的使用方式差异，而不只是宽度差异。
从移动优先开始想
推荐的做法是先设计手机端，再往大屏扩展。原因很实际：手机屏幕空间紧张，逼着你把内容优先级想清楚。先把最重要的东西放进去，大屏上再加料就容易得多。
反过来做的话，常见结果是在手机上把一堆元素硬塞进去，或者干脆隐藏掉——而隐藏掉的往往正是转化入口。
断点别设太多
常见的断点设置三档就够：
/* 手机优先，然后向上扩展 */.card { width: 100%; }@media (min-width: 768px) {.card { width: 50%; }}@media (min-width: 1200px) {.card { width: 33.33%; }}设五个六个断点，维护起来会很痛苦，而且中间那些尺寸的设备都被忽略了。更稳妥的思路是让布局本身有弹性，用网格和弹性盒让元素自己流动，媒体查询只用来处理关键的布局切换。
导航是最难的一块
电脑上横着排的七个栏目，在手机上必须换个形态。常见做法是收进汉堡菜单，但要注意：
- 菜单展开后要能顺畅滚动，别在小屏上溢出屏幕
- 子菜单用点击展开，不要依赖悬停
- 关闭按钮足够大，位置放在拇指能够到的地方
- 当前所在栏目要高亮，否则用户在多级菜单里会迷路
图片和媒体
响应式图片要解决的是"不同屏幕下载不同大小的图"。用 srcset 提供多个尺寸，浏览器会根据屏幕密度和视口宽度自动选择：
- 准备三到四个尺寸：比如 480、800、1200、1600 像素宽
- 用 WebP 格式：体积能小三成左右
- 非首屏图片加懒加载：
loading="lazy" - 视频用自适应容器：保持比例，别写死高度
容易被忽略的细节
- 触摸目标不小于 44 像素，按钮之间留足间距
- 表单唤起正确的键盘：手机号用
type="tel" - 表格改成卡片或允许横向滚动，别让内容溢出
- 固定定位的头部别占太高，手机上超过 60 像素就很压迫
- 别禁用缩放，
user-scalable=no会挡住一部分用户
测试怎么覆盖
浏览器里的设备模拟器只能看布局，看不出真实体验。至少要在两到三台真机上跑一遍，包含一台小屏安卓、一台 iPhone，外加一台平板。重点验证：首页加载、菜单操作、表单填写、电话拨号这几个动作。
响应式的验收标准不是"能显示"，而是"在小屏幕上依然好用"。
—— 一位只用自己的旧手机测站的前端