viewport meta 标签必须放在 head 中且 content 为 width=device-width, initial-scale=1，否则响应式失效；媒体查询优先用 min-width 递进写法；Grid 布局更优，需配合 box-sizing: border-box 全局设置。
没加 <meta name="viewport" content="width=device-width, initial-scale=1">，其他所有响应式手段都白搭——浏览器默认按 980px 渲染，再精细的 @media 规则也压不住这个“自动缩放”。
viewport meta 标签必须写对位置和参数
它得放在 <head> 里，不能塞进 <body> 或注释后；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">，别混在参数里
真正卡住人的往往不是 @media 写多少条，而是 box-sizing 漏了、viewport 放错了位置、或者在 Grid 里偷偷用 float ——这些地方一出错，整个响应式链路就断了，而且很难一眼看出来。
