viewport meta 标签必须放在 head 中且 content 为 width=device-width, initial-scale=1，否则响应式失效；媒体查询优先用 min-width 递进写法；grid 布局需配合 box-sizing: border-box 和 gap 使用；图片须设 aspect-ratio 或 srcset 响应式加载；导航需语义化并支持无 js 汉堡菜单。
没加 <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
布局引擎选 display: grid，三栏结构直接切单列
现代项目无脑用 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 会继续拉伸导致高度失控。
关键细节：
- 全局加
* { box-sizing: border-box; }，否则width: 200px + padding: 10px实际占 220px，三栏直接错位 - 栅格类只管尺寸，
padding和margin往里包一层<div class="sec">，别混在参与计算的元素上<h3>图片和导航这类高频模块必须单独处理</h3> <p>网格里放图，最容易暴露的是尺寸失控和失败静默。不是加个 <code>max-width: 100%就完事：- 统一用
aspect-ratio: 4/3或1/1锁定比例，比靠height更可靠；若需兼容旧 Safari，套一层<div> + <code>overflow: hidden -
<img>标签必须加onerror="this.src='placeholder.svg'"，否则加载失败时留白或错位，网格自动重排 - 响应式源用
srcset+sizes，例如：<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw">
导航栏必须用
nav+ul+li结构，不是“看起来规范”，而是浏览器和辅助技术依赖这套语义链来理解导航意图；移动端汉堡菜单必须用<input type="checkbox">，不用 JS 也能展开收起，且 JS 加载失败时仍可用。真正容易被忽略的，是
box-sizing和gap的耦合关系——它们不是独立开关，而是一体两面：一个控容器内耗，一个控轨道分配，漏掉任一，网格就会在窄屏上突然少一列或撑出滚动条。 - 统一用
