必须添加viewport元标签、使用语义化标签、为flex项设min-width、为图片设width/height属性，响应式本质是内容节奏适配。

必须加 <meta name="viewport" content="width=device-width, initial-scale=1.0">

没这行，所有响应式 CSS 都可能失效——浏览器会按桌面视口（通常 980px）渲染，@media 断点根本不会触发。尤其在 iOS Safari 和部分安卓 WebView 中，缺失该标签会导致页面被缩放、文字模糊、点击区域错位。

常见错误：

• 复制粘贴时漏掉 content 属性值中的空格或引号
• 把 viewport 放在 里（必须在 ）
• 写了两遍，造成冲突（比如一个设 initial-scale=1.0，另一个设 user-scalable=no）

用 <main></main> 替代 <div id="main"> 不是“语义洁癖” <p><code><main></main> 是浏览器和读屏软件识别主内容的唯一可靠信号。它直接影响：

• 键盘 Tab 焦点流：辅助技术会跳过 <nav></nav>、<aside></aside> 直接进入 <main></main>
• SEO 抓取权重：Google 更倾向将 <main></main> 内的 <h1></h1>～<h6></h6> 视为主内容标题层级
• DOM 顺序即阅读顺序：移动端屏幕阅读器不看视觉位置，只按源码顺序播报，<main></main> 必须出现在 <nav></nav> 之后、<footer></footer> 之前

注意：<main></main> 全页只能出现一次；不能嵌套在 <article></article>、<aside></aside>、<footer></footer>、<header></header> 或 <nav></nav> 内部。

flex-wrap + min-width 才能防小屏卡片塌陷

只写 display: flex; flex-wrap: wrap; 不够。当屏幕宽度逼近子项自然宽度时，flex 项会被强行压缩，文字换行、图标错位、按钮高度突变——这不是 bug，是未设收缩底线的必然结果。

正确做法：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 给每个卡片或按钮组加 min-width: 280px（或 min-width: 15rem），确保至少能放下关键文字和操作区
• 避免对 flex 容器同时设 width: 100% 和 max-width: 1200px：小屏下容器仍占满视口，但内容被截断，用户得左右拖拽
• 慎用 flex-direction: column-reverse：部分旧版安卓 WebView 完全忽略该值，导致视觉顺序与 DOM 顺序不一致，键盘焦点乱跳

<picture></picture> 和 <img> 必须带 width 和 height 属性

没有这两个 HTML 属性，图片加载前不预留空间，加载瞬间会把下方内容往下顶，造成布局抖动（layout shift）。这对列表页、瀑布流、新闻卡片页尤其致命——用户正在滚动，突然整个页面下跳，体验直接断裂。

不是用 CSS 的 width/height 替代，而是必须写在标签上：

@@##@@

或配合 <picture></picture>：

<picture><source media="(min-width: 768px)" srcset="hero-desktop.webp" width="1200" height="600">
  @@##@@
</source></picture>

注意：width 和 height 值应为图片原始尺寸（非 CSS 渲染尺寸），浏览器会据此计算 aspect ratio 并预留空间。

最易被忽略的一点：响应式不是“样式适配”，而是“内容节奏适配”。字体大小、行宽、触控目标、加载优先级，每一项都得按设备能力重排优先级——比如手机端首屏不该塞 6 张图，而应留出足够空白让拇指准确点中按钮。