响应式布局由视口控制、流式结构、弹性媒体、断点适配四层构成；必须设置<meta name="viewport">，推荐display: grid+auto-fit+minmax()实现自适应栅格，导航需语义化结构与checkbox控制，全局box-sizing: border-box确保盒模型统一。
响应式布局不是靠某一个技巧撑起来的，而是由视口控制、流式结构、弹性媒体、断点适配这四层共同构筑的骨架。漏掉任何一层，都会在特定设备上崩出横向滚动条或错位。
必须在 <head> 里写死 <meta name="viewport">
这是整个响应式链路的第一道闸门。没它，max-width: 100% 和媒体查询全失效——移动端浏览器会按 980px 宽度渲染，再缩放显示，文字小到无法点击。
-
content="width=device-width, initial-scale=1.0"是底线，别加user-scalable=no（禁用缩放会直接违反 WCAG） - 不要用
target-densitydpi（仅 Android 2.x 支持，已废弃） - 如果项目需兼容微信内置浏览器旧版本，可追加
maximum-scale=1.0，但仅限灰度发布验证后使用
display: grid 配 auto-fit + minmax() 是现代栅格首选
比起一堆 @media 断点或 flex-wrap 换行，这行 CSS 能让列数随容器宽度自动增减，逻辑更干净，维护成本更低。
- 写法是：
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) - 最小列宽设为 320px 是为了防止 iPhone SE 等窄屏强行挤出两列导致横向溢出
- IE11 不支持
auto-fit，必须降级：用repeat(3, 1fr)+ 媒体查询兜底，或改用 Flexbox -
gap必须设在容器上，别给子项加margin——后者在换行/重排时极易错位
导航栏必须用 nav + ul + li + a 结构，且移动端折叠依赖 input[type="checkbox"]
这不是“语义洁癖”，而是可访问性与行为稳定性的硬要求。用 div 模拟导航，键盘 Tab 顺序就乱了；用 JS 控制展开，JS 失效时菜单永远不可见。
立即学习“前端免费学习笔记（深入）”；
-
ul.nav-menu默认设max-height: 0; overflow: hidden;，而非display: none（前者支持 CSS 过渡动画） - 触发展开靠
input:checked ~ .nav-menu，input必须放在label前，并用for关联，确保触控热区 ≥ 44px - 下拉菜单必须是对应
li的直接子元素（li > ul），否则定位偏移、焦点管理失控
box-sizing: border-box 要全局生效，且必须覆盖伪元素
几乎所有栅格错位、卡片撑破容器、padding 导致换行异常的问题，根源都在盒模型没归一化。
- 第一行 CSS 就该写：
* { box-sizing: border-box; } - 特别注意
::before和::after也要被覆盖，否则伪元素加了border或padding仍会撑出额外宽度 -
gap不受box-sizing影响，所以它比margin更可靠——这也是为什么 Grid/Flex 推荐优先用gap
真正难的不是写出那几行 CSS，而是意识到：Grid 是二维系统，不能和 float、inline-block 或未统一的 box-sizing 混用。一旦混了，调试时看到的“表现异常”，八成是布局上下文冲突，而不是语法写错了。
