viewport未生效是响应式失效主因，必须写对content属性、置于head最前、禁用user-scalable；rem需JS动态计算；断点应按内容而非设备；老安卓WebView需降级兼容。
viewport meta 标签没加，rem 和 vw 全部失效
不写 <meta name="viewport" content="width=device-width, initial-scale=1.0">，所有适配逻辑都建立在错误基准上。浏览器默认用 980px 布局视口渲染，rem 算的是 980px 下的根字号，vw 量的也是这个被缩放后的视口宽度——结果就是页面整体压缩、文字小得看不清、横向滚动条意外出现。
必须把这行塞进 最顶部，且不能被 JS 动态覆盖（除非你明确知道在改什么）：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
width=device-width是核心，它让布局视口宽度 = 设备 CSS 像素宽度 -
initial-scale=1.0防止首次加载时字体突变或缩放抖动 - 别加
minimum-scale或多余缩放控制，某些安卓 WebView 会直接忽略initial-scale
rem 必须动态设根字号，静态 media query 不够用
不改 document.documentElement.style.fontSize，rem 就只是个固定倍数单位，和 px 没本质区别。靠 CSS 媒体查询写死几档 font-size，既难覆盖全面机型，又容易在中等尺寸设备上断层（比如 412px 宽的安卓机卡在 375px 和 750px 之间）。
实际做法是用 JS 在页面加载初期读取 window.innerWidth 或 document.documentElement.clientWidth，算出比例后直接设置根字号。常见方案按 750px 设计稿等比缩放：
document.documentElement.style.fontSize = (window.innerWidth / 750) * 100 + 'px';
- 初始化要早：最好放在
内联脚本里，避免 FOUC（内容闪动） - 监听变化：必须处理
resize和orientationchange，但别高频触发——用requestAnimationFrame包一层做节流 - 别用
window.screen.width：横竖屏切换时值可能滞后；也别用window.innerWidth直接算而不节流，iOS Safari 下容易闪动
vw 可以省 JS，但键盘弹出和小屏字号会翻车
vw 看似简单：一行 CSS 就能替代 JS 计算，比如 html { font-size: 3.75vw; } 在 750px 设计稿下刚好 ≈ 28.125px。但它不是 rem 的平替，行为逻辑完全不同。
典型翻车点：
- iOS Safari 唤起软键盘时，
vw按“视觉视口”重算，font-size骤然缩小，导致输入框附近元素跳动 - 小屏上
font-size: 4vw可能算出小于 12px，iOS 会强制最小字号为 12px，实际显示比预期大 - 安卓部分浏览器对小数
vw渲染有舍入误差，连续嵌套rem（比如padding: 0.3rem+font-size: 3.75vw）会放大偏差
所以 vw 更适合全屏 banner、顶部导航栏高度这类对绝对视口依赖强的场景，不适合混用 px 的组件（比如 border: 1px）或需精确控制行高的文本块。
rem + vw 混用时，border 和 padding 容易失真
混用的核心矛盾在于：rem 的基准是 JS 动态写的根字号，vw 是 CSS 引擎实时解析的视口单位。两者叠加时，浏览器渲染顺序和精度误差会暴露出来。
典型现象：
- 按钮写
padding: 0.3rem 1vw，在 iPhone X 上左右内边距看起来不等 -
border: 0.02rem solid #ccc渲染成虚线甚至不可见——因为 0.02rem × 100px = 2px，但在像素比为 2.82 的设备上，2px 被渲染为 1.96px → 四舍五入后可能只剩 1px 或直接丢弃
解决思路很实在：
- 边框统一用
1px（物理像素），配合transform: scale(0.5)或伪元素 +device-pixel-ratio媒体查询兜底 - 避免写
0.02rem这类极小值，rem 单位建议下限设到0.1rem（即 10px）以上 - 如果必须混用，把
vw仅用于容器宽高，rem用于文字、内边距等需稳定缩放的部分
最常被忽略的一点：哪怕你用了 PostCSS 插件自动转 px 到 rem 或 vw，只要 viewport 没配对、根字号没动态设准、或者混用时没控住最小物理像素，UI 就会在某台真机上突然错位——不是代码没生效，是计算基准从一开始就被污染了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
