viewport标签必须置于最开头且仅含width=device-width和initial-scale=1.0两个参数，否则浏览器先按980px渲染再缩放导致抖动；语义化标签是flex/grid生效前提；断点应基于内容临界点而非设备宽度；字体单位需统一用rem等响应式单位。
viewport meta 标签写错或放错位置，响应式布局就直接失效——不是 CSS 没写对，而是浏览器压根没按移动设备逻辑渲染。
viewport 必须放在
浏览器一解析到 <meta name="viewport"> 就立刻重设视口，晚了就会先按 980px 渲染首屏，再缩放导致抖动甚至重排。常见翻车点包括：
- 被 SSR 注入的注释、
<script></script>占位符挤到<meta charset>后面 - 用 JS 动态创建并
append()，完全不生效 - 误写在
里，Chrome 和 Safari 都忽略
标准配置只允许：<meta name="viewport" content="width=device-width, initial-scale=1.0">。禁用 maximum-scale=1.0 或 user-scalable=no 会违反 WCAG 2.1 可访问性要求，视力障碍用户无法放大阅读。
HTML 语义化标签不是“加分项”，是 Flex/Grid 生效的前提
一堆 <div> 套 <code><div> 的结构，媒体查询里加再多 <code>flex-direction: column 也救不回错位的表单或溢出的搜索栏。浏览器不知道哪个 <div> 是导航、哪个是主内容，自然没法精准控制断点行为。
<ul><li>用 <code><header></header>、<nav></nav>、<main></main>、<aside></aside>、<footer></footer> 替代 <div class="wrap"> 类命名
<li>表单必须包裹在 <code><form></form> 内，每组 <label>+<input></label> 用 <div class="form-group"> 包裹，否则断点中无法统一设垂直流
<li>搜索栏这类交互组件单独抽成 <code><section class="search-bar"></section>，避免和导航、侧边栏共用同一层容器
断点不是抄设备宽度，而是看内容何时撑不开
硬套 @media (max-width: 768px) 做平板断点，结果在某些安卓平板上文字换行错乱——因为设计稿里两列卡片刚好在 783px 宽度开始重叠，你卡在 768 就晚了。断点应基于内容临界点，而非设备参数。
- 优先使用
min-width单向递增写法（mobile-first），避免嵌套混乱 - Flexbox 基础样式（如
display: flex、flex-wrap）应在默认 CSS 中定义，媒体查询只负责调整方向、间距、顺序等响应行为 - 图片必须设
max-width: 100%和height: auto，否则撑爆容器引发横向滚动
font-size: 62.5% 却没配 rem 计算，整个字体体系就全乱
viewport 写对了，但 上写了 font-size: 62.5% 却没在后续 CSS 里用 rem 换算，所有字体尺寸都会错位。这不是媒体查询的问题，是单位链断裂。
- 若用
62.5%（即 1rem = 10px），则16px应写为1.6rem，不是16rem - 禁用
px固定字号，该用rem、em或vw的地方必须换 -
的font-size若用 JS 动态设置，需确保在 CSS 加载前执行，否则首次渲染会闪动
真正卡住响应式的，往往不是媒体查询写得少，而是骨架松散：viewport 错位、语义缺失、断点凭感觉、单位混用。这些地方一错，后面所有 CSS 都在给错误结构打补丁。
