必须加viewport meta标签，否则@media在移动端不触发；语义化标签（header/nav/footer）+ flex布局 + 媒体查询断点是响应式基础，结构清晰、可访问、易维护。
直接用 <header></header> 和 <footer></footer> 标签搭结构，配合 flex 布局 + @media 媒体查询控制断点，就能跑通绝大多数场景。关键不是“怎么炫”，而是结构不崩、语义清晰、移动端可点。
必须加 viewport meta 标签，否则整个响应链失效
没这行，@media (max-width: 768px) 在 iOS Safari 和安卓 Chrome 里根本不会触发，页面会按 980px 强制缩放。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须放在最前面，不能靠 JS 动态插入 -
initial-scale=1.0不能省——安卓 WebView 默认可能缩到 0.8，字体模糊、点击热区变小 - 别加
user-scalable=no：WCAG 2.1 明确反对禁用缩放，会破坏可访问性
页头用 <header></header> + <nav></nav>，别用 div 套 div
语义错位会导致读屏器跳过导航、SEO 权重稀释、后期维护时没人看得懂哪块是主菜单。
-
<nav></nav>应该是<header></header>的**直接子元素**；中间插<div> 或 <code><p></p>会切断弹性上下文，justify-content: center就会失效 - 移动端收起导航，优先用 CSS 控制：
@media (max-width: 768px) { nav { flex-direction: column; height: 0; overflow: hidden; } nav.active { height: auto; } }（注意：height 不能从auto动画，得用max-height更稳妥） - 汉堡图标必须用
<button></button>包裹，并带aria-label="打开菜单"和aria-expanded="false"，JS 只负责切这个布尔值 -
html 和 body 都要设
height: 100%，body 设display: flex; flex-direction: column - 主体内容区域（比如
<main></main>或<div class="content">）加 <code>flex: 1，自动撑满剩余空间 -
<footer></footer>自然沉底，无需额外定位；多列链接在小屏下用flex-wrap: wrap+flex-direction: column切换为垂直排列 - 页脚内文字字号建议略小（如
font-size: 0.875rem），行高设为1.6，确保可读性 - 把断点逻辑放在
<header></header>、<nav></nav>、<footer></footer>这些语义容器上，它们有明确的盒模型上下文 - 用
min-width/max-width控制容器尺寸边界，再用子选择器统一调控内部流式行为 - 避免在
<header></header>或<footer></footer>上直接写width或height—— 它们没有默认盒模型约束，只靠font-size或color很难维持视觉节奏
页脚用 <footer></footer> + Flex 粘性布局，避免内容少时留白
纯 position: fixed 或 margin-top 拉底容易在内容高度变化后错位；Flex 方案更稳定。
媒体查询别写在孤立元素上，要绑定到容器级结构
给 <p></p> 或 <a></a> 单独写 @media 看似能调字体，但一旦 JS 动态插入内容或 SSR 渲染顺序变化，样式就丢了。
最常被忽略的其实是结构层级：嵌套超过 4 层（比如 <header> > <div> > <nav> > <ul> > <li>）就该拆了，要么用 <code><section></section> 分隔，要么提取成独立模块。语义越干净，CSS 越好写，响应式越不容易崩。
