viewport meta 标签必须放在 中且 width=device-width，否则响应式失效；媒体查询优先用 min-width 递进写法；全局启用 box-sizing: border-box；图片用 srcset 和 sizes，字体用 rem 或 clamp()；避免 vh 全屏高度。
没加 <meta name="viewport" content="width=device-width, initial-scale=1">，其他所有响应式手段都白搭——浏览器默认按 980px 渲染，再精细的 @media 规则也压不住这个“自动缩放”。
viewport meta 标签必须写对位置和参数
它得放在 里，不能塞进 或注释后；width=device-width 是硬性要求，写成 width=375 或漏掉都会失效。别加 user-scalable=no，这会锁死双击放大，iOS Safari 在某些版本下还会让 maximum-scale 失效，直接伤害可访问性。
常见错误现象：
- 页面在手机上显示极小、需手动缩放才能阅读
- 调试器里拖动宽度，样式完全不响应
- 桌面端正常，移动端所有
@media都没触发
媒体查询优先用 min-width 递进写法
基础样式（小屏）直接写，不包 @media；大屏增强规则用 @media (min-width: 768px) 往上叠加。这样逻辑线性、覆盖可控，不会出现“写了 max-width: 767px 却忘了重置 display”这种翻车。
断点别抄模板数字。打开浏览器开发者工具的响应式模式，拖动窗口宽度，观察内容何时开始挤、换行、文字难读——记下那个像素值（比如 624px），再取整为 640px 这类好维护的数。通常 480px、768px、1024px 覆盖 90% 场景，再多就该考虑组件级响应，而非全局堆 @media。
容易踩的坑：
-
@media (max-width: 767px)和@media (min-width: 768px)并列写，缩放 110% 的 iPad 可能卡在中间缝隙里，两边都不命中 - 在
@media里改了布局但漏掉--color-primary这类自定义属性，视觉上像“没生效” - 靠反复
display: none/block切换元素来“模拟换内容”，破坏语义与 SEO
box-sizing: border-box 必须全局启用
全局加 * { box-sizing: border-box; }，否则 width: 200px + padding: 10px 实际占 220px，三栏直接错位。栅格类只管尺寸，padding 和 margin 往里包一层 <div class="sec">，别混在参与计算的元素上。<p>现代项目无脑用 <code>grid：grid-template-columns: 200px 1fr 200px 定义三栏，gap 控制间距比 margin 更稳。移动端必须用 @media (max-width: 768px) 改成 grid-template-columns: 1fr，让三栏垂直堆叠——别用 display: block 覆盖，那会破坏 Grid 上下文。
如果要兼容 IE11，gap 得回退写成 grid-column-gap 和 grid-row-gap；flex-direction: column 切竖排前，先给子项设 flex: none; width: 100%，否则 flex: 1 会继续拉伸导致高度失控。
图片和字体的响应式不是“加个 max-width”就完事
img { max-width: 100%; height: auto; } 是底线，但真要统一视觉呈现，得配合 srcset 和 sizes：让高 DPR 设备加载 @2x 图，窄屏加载小图，避免带宽浪费和模糊。
字体单位优先用 rem 或 clamp(1rem, 4vw, 1.5rem)，而不是固定 px；line-height 用无单位值（如 1.5），避免继承链中被意外放大。
关键细节：
- 所有图标、按钮、表单控件的
padding和font-size必须同步缩放，否则小屏上点击区域过小、文字糊成一团 - 使用
aspect-ratio控制卡片/封面图比例，比 JS 计算或伪元素 hack 更可靠 - 不要依赖
vh做全屏高度——Safari iOS 滚动时vh会变，导致内容截断
真正卡住统一视觉呈现的，往往不是布局逻辑，而是那些“看起来差不多”的像素级偏差：1px 边框在 @2x 屏上发虚、rem 基准没随视口动态调整、gap 在旧版 Chrome 里被忽略……这些地方不逐个验证，光靠 @media 切换是撑不起一致体验的。
