响应式系统依赖viewport配置、媒体查询断点和JS动态适配三者协同；viewport必须为首标签且禁用user-scalable；断点宜用em单位并基于容器宽度；rem需JS实时计算，三者须同源生效。
HTML 本身没有响应式系统，所谓“更新响应式系统模板”，实际是更新支撑响应式的三类东西：viewport 配置、媒体查询断点逻辑、以及用于动态适配的 JS 计算（如 rem 基准）。直接改 index.html 文件里的 HTML 标签不会让页面“变响应”，真正起效的是这三处是否协同且未被破坏。
viewport 标签必须在 最前面且只出现一次
很多模板交付时 viewport 被插在 script 后面、或被构建工具二次注入覆盖、甚至被 CMS 动态删掉。结果就是手机上页面缩成一团、左右可拖动、文字糊。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须是<head>中第一个标签，不能用 JS 动态 append - 禁用
user-scalable=no或maximum-scale=1.0—— 它们既不真正禁缩放，又违反 WCAG 可访问性要求 - 别写
width=375或width=1200这类固定值，折叠屏、分屏、横屏键盘弹出时全崩
媒体查询断点要按容器宽度设，不是按设备型号硬编码
写 @media (max-width: 767px) 看似兼容 iPhone，但安卓平板实际宽度常是 800px，iPad Pro 展开后逻辑宽度 1024px，这类断点会直接失效。
- 推荐用
@media (min-width: 48em)（即 ≥ 768px），em 单位基于用户字体设置，更健壮 - 断点应围绕内容容器（如
<main>或.container）的宽度变化来设，而不是“适配 iPhone X”这种伪需求 - 如果模板用了 Bootstrap，确认没手动覆盖
$grid-breakpoints变量，否则自定义 CSS 里的@media会和框架冲突
rem 基准必须用 JS 动态计算，不能靠 media query 硬写 font-size
只在 CSS 里写 @media (max-width: 768px) { html { font-size: 14px; } }，会在 iPad Pro、安卓平板、折叠屏展开态全部失准——因为这些设备 clientWidth 不等于媒体查询匹配的宽度。
立即学习“前端免费学习笔记（深入）”；
- 必须用 JS 按真实视口宽度实时算：
document.documentElement.style.fontSize = (clientWidth / 375) * 16 + 'px'; - 监听
resize和orientationchange，但注意 iOS 键盘弹出时clientWidth不变，需额外监听focus临时调小 font-size 防输入框被顶出 - 某些安卓 WebView 不触发
resize，得补监听matchMedia('(min-width: 0px)')
最容易被忽略的是：viewport、媒体查询、rem JS 三者必须同源生效。改了 index.html 的 viewport，却忘了检查构建后是否被 webpack 插件清掉；写了 JS 设置 rem，但脚本加载顺序在 DOM 渲染之后导致首次渲染错乱；断点按 em 写了，CSS 里却混用了 px 值破坏比例。这些地方一漏，响应式就变成“看起来正常，真机一测全翻车”。
