响应式布局必须从语义结构、容器嵌套和断点职责三层面同步设计：用定义天然层级边界，容器需支持弹性穿透（如width:100%而非固定像素），断点应基于内容挤压临界点而非设备型号划分。
响应式布局层级不是“从上到下写一遍HTML再加媒体查询”就能成立的，它必须从语义结构、容器嵌套和断点职责三个层面同步设计——否则容易出现小屏下导航错位、中屏内容溢出、大屏留白失控等问题。
用语义化标签定义天然层级边界
HTML5 的 <header></header>、<nav></nav>、<main></main>、<aside></aside>、<footer></footer> 不是装饰性标签，它们各自构成一个独立的布局上下文。浏览器默认会为这些元素应用隐式块级行为，且屏幕阅读器能据此建立导航层级树。
-
<nav></nav>内部必须用<ul><li><a></a></li></ul>结构，不能用<div> 堆砌链接，否则键盘 Tab 顺序断裂，<code>aria-current失效 -
<main></main>是唯一可被document.querySelector('main')定位的主内容区，所有媒体查询中的“内容流重排”逻辑都应围绕它展开 -
<aside></aside>在桌面端可作为侧边栏，但在max-width: 768px下建议设为position: absolute并隐藏，而非简单display: none——后者会让辅助技术直接跳过该区域 - 最外层
或根级<div class="layout"> 必须用 <code>width: 100%或max-width: 100vw，禁用min-width阻断收缩 - 网格容器（如
display: grid）的grid-template-columns应优先使用repeat(auto-fit, minmax(300px, 1fr)))，而不是写死列数；fr单位才能响应父容器变化 - 图片容器若用
aspect-ratio: 16/9，其父级不能设height: 200px—— 高度应由内容撑开，否则在窄屏下会裁切 - 导航栏文字换行临界点：当
nav ul li a文字宽度总和 > 父容器可用宽度 × 0.9 时，触发max-width: 768px折叠逻辑 - 九宫格从 3×3 变 2×2 的时机，不是看屏幕宽，而是看单格最小安全点击热区（iOS 推荐 ≥ 44px）是否被压缩到
- 避免嵌套媒体查询，比如在
@media (min-width: 768px)内再写@media (orientation: landscape)—— 浏览器解析顺序可能导致样式覆盖混乱
容器嵌套必须满足“弹性穿透”原则
响应式失效常源于父容器用固定像素（如 width: 1200px）锁死，导致子元素的百分比或 flex 计算全部失准。真正的响应式容器应允许尺寸信息逐层向下传递。
媒体查询断点要按内容密度而非设备型号划分
写 @media (max-width: 480px) 是典型误区。iPhone 15 Pro Max 的物理宽度是 430px，但 Safari 缩放后视口宽度可达 980px；而某些安卓折叠屏展开后仅 720px 却需桌面级导航。断点应基于“内容是否开始挤压”来判断。
真正难的不是写出能缩放的代码，而是让每个 HTML 元素知道自己在什么条件下该“让步”、什么条件下该“撑开”，以及当用户缩放字体或切换深色模式时，层级关系是否依然成立。这要求你在写第一个 <div> 之前，就决定好哪一层负责流式伸缩、哪一层负责视觉隔离、哪一层必须保持绝对定位不参与流式计算。</div>
