现代响应式布局失效的根源是viewport未生效、DOCTYPE触发怪异模式、Flex/Grid老内核行为差异三处关键点未卡准；viewport必须置于head最顶、格式严格为width=device-width且无BOM，DOCTYPE须顶格无空字符，低版本Android WebView需用margin模拟gap、显式列定义替代repeat函数。
现代响应式布局在旧版浏览器或特定 WebView 中跑不起来，不是因为代码写得不够“新”，而是几个关键兼容点没卡准——viewport 没生效、DOCTYPE 触发了怪异模式、Flex/Grid 的老版本行为差异被忽略，这三处一错，后面所有媒体查询和弹性单位都白搭。
viewport meta 标签必须放对位置且写对格式
移动端页面“不响应”，90% 是这行没写对或压根没加：<meta name="viewport" content="width=device-width, initial-scale=1">。它不是可选配置，是现代移动渲染的开关。
- 必须放在
<head>最顶部，早于任何 CSS/JS，前面不能有空格、注释、BOM 字节 -
width=device-width不能写成width=device_width（下划线是致命拼写错误） -
initial-scale=1别写成1.0或1.00，部分旧版 UC 浏览器会忽略 - 别加
user-scalable=no，除非是自助终端（Kiosk），否则违反可访问性要求 -
maximum-scale和minimum-scale在 iOS 10+ 已被 Safari 忽略，安卓 WebView 行为不一致，纯属埋雷
DOCTYPE 必须顶格且无 BOM，否则直接进怪异模式
只要 <!DOCTYPE html> 前面有任何字符（包括 UTF-8 BOM、空格、PHP 输出的空白、<!-- 注释 -->），IE 和旧 Edge 就会触发 Quirks Mode——盒模型错、document.body.scrollTop 读不对、浮动塌陷，全乱套。
- 用 Chrome DevTools Elements 面板顶部确认显示 “Standards”，不是 “Quirks”
- VS Code 右下角编码必须设为 UTF-8 without BOM，不是普通 UTF-8
- 删掉
<!DOCTYPE html>前所有内容，哪怕是一个不可见的零宽空格 - 别用 HTML4 的 DTD 声明，比如
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">，现代浏览器反而解析更不稳定
Flex/Grid 在低版本 Android WebView 中的行为差异
Android 4.4 系统 WebView（Chromium 30）仍有存量，它不支持 gap、flex-wrap: wrap-reverse、grid-template-areas、subgrid，甚至 repeat(auto-fit, ...) fallback 经常失效。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 稳妥的 Flex 写法：
.container { display: flex; flex-wrap: wrap; }+.item { flex: 0 0 calc(33.333% - 20px); margin: 10px; }，比flex: 1 1 300px兼容性广得多 - Grid 推荐用显式列定义：
grid-template-columns: 1fr 1fr;，避免函数式语法如repeat(2, minmax(0, 1fr))) -
gap属性必须降级：用margin模拟，例如.item:not(:last-child) { margin-right: 1rem; } - 语义标签如
<main>、<section>在 IE8–11 中默认是 inline，需手动加 CSS：main, section, article, aside, nav, header, footer { display: block; }
rem/vw 字体适配不能只靠根元素设死值
写 html { font-size: 16px; } 再全用 rem，并不能让字号随屏幕变宽而变大——1rem 永远是 16px。要让它“动起来”，得用真正响应的方案。
- 用
vw：例如html { font-size: 4.266667vw; }（即 16px / 375 × 100），iOS Safari 9+ 支持，但 iOS 8–10 不支持vw用于font-size - 用
clamp()：例如font-size: clamp(1rem, 2.5vw, 1.5rem);，适合字号、内边距等需平滑过渡的场景；但它不能替代媒体查询做布局切换（比如隐藏侧栏） - JS 动态设根字号时，监听
resize比监听scroll更安全；真机上优先用window.innerWidth而非document.documentElement.clientWidth
兼容性问题从来不是“加个 polyfill 就完事”，而是从 DOCTYPE、viewport、特性检测这三根柱子开始立稳——柱子歪了，补丁越多越容易崩。尤其要注意那些“看起来正常”的边缘情况：BOM 字节、WebView 版本碎片、iOS 旧版对 vw 的限制，这些地方最容易漏查，也最难复现。
