不能靠嵌套@media或堆砌Flexbox，破局点是：Grid定主结构、Subgrid解耦子层级、min-width向上增强断点；@media必须顶层声明，嵌套写法被浏览器忽略，真机尤其iOS Safari直接跳过。
不能靠嵌套 @media，也不能靠堆砌 Flexbox 容器——复杂嵌套布局的破局点是：用 CSS Grid 定义主结构，用 Subgrid 解耦子层级，用 min-width 断点向上增强。
为什么嵌套 @media 在 CSS 里根本不存在
很多人写 @media (min-width: 768px) { .card { @media (prefers-color-scheme: dark) { ... } } }，这整段规则浏览器直接忽略。CSS 规范强制要求 @media 必须是顶层声明，和选择器平级。DevTools 有时显示“生效”，只是调试器在模拟，真机（尤其 iOS Safari）会跳过整块。漏掉 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 更致命：没它，min-width: 768px 判定的是 980px 默认视口，不是设备真实宽度。
CSS Grid + Subgrid 是嵌套布局的真正解耦方案
传统做法是给每个子容器加 display: flex 或 display: grid，结果是父网格轨道和子网格轨道各自独立，高度对不齐、间距难统一。Subgrid 让子元素直接继承父网格的行/列定义，不用重复声明 grid-template-rows。
例如商品卡片需「图片+标题+价格+收藏按钮」高度一致且底部对齐：
立即学习“前端免费学习笔记（深入）”；
/* 父卡片是 Grid 容器 */
.card {
display: grid;
grid-template-rows: auto 1fr auto auto;
/* 注意：这里定义了四行轨道 */
}
<p>/<em> 子元素用 Subgrid 继承，不另设轨道 </em>/
.card img { grid-row: 1; }
.card h3 { grid-row: 2; }
.card .price { grid-row: 3; }
.card .fav { grid-row: 4; }</p><p>/<em> 关键：子容器（如价格区）也用 Subgrid </em>/
.price {
display: grid;
grid-row: 3;
grid-template-columns: subgrid; /<em> 继承父列 </em>/
grid-template-rows: subgrid; /<em> 继承父行 </em>/
}这样所有卡片高度由父 .card 的 grid-template-rows 控制，子元素位置不漂移，也不需要 JS 计算高度。
Flexbox 嵌套到第 2 层就该停手
Flexbox 天然适合一维排列，但一旦出现「某列里还要分上下两块」「某按钮组要横向对齐但整体又得纵向居中」，继续嵌套只会让 flex-direction、align-items、justify-content 相互打架。常见症状包括：
- 子容器设置了
display: flex，但父容器没设height，导致align-items: flex-end失效 - 嵌套三层以上后，
flex-basis和min-width冲突，移动端宽度崩塌 - 横竖屏切换时，
order属性无法跨父容器重排（#item-1在.column里，#item-3是兄弟节点，order 拿不到）
此时应把外层结构交给 Grid（定义区域和轨道），只在局部微调用 Flexbox（比如按钮组内图标+文字水平对齐）。
断点组织必须放弃 max-width 区间写法
写 @media (min-width: 768px) and (max-width: 991px) 是自找麻烦：漏掉 992–1199px 就裸奔；改一个断点要搜全项目；Sass 变量没法统一管理。正确做法是纯 min-width 向上增强：
-
@media (min-width: 768px)：启用平板基础响应（调整 padding、font-size） -
@media (min-width: 1024px)：启用 grid 分栏（grid-template-columns: repeat(2, 1fr)） -
@media (min-width: 1200px)：启用桌面专属模块（展示隐藏侧边栏、拉宽 container）
所有断点值必须抽成变量（如 Sass 的 $bp-tablet: 768px），禁止硬编码。用户偏好（prefers-color-scheme、prefers-reduced-motion）必须单独写 @media，和宽度断点正交——混写会丢场景（比如手机暗色模式被 min-width: 768px 过滤掉）。
真正卡住人的从来不是语法会不会，而是「该在哪一层交出控制权」：Grid 管骨架，Subgrid 管血肉，Flexbox 只管毛细血管。越早放弃用 Flexbox 模拟二维，越早跳出嵌套深渊。
