viewport 必须先配好，否则 rem/vw 全白搭；需添加 ，其中 width=device-width 是核心，确保布局视口等于设备 css 像素宽度。
viewport 必须先配好，否则 rem/vw 全白搭
不加 <meta name="viewport">，所有适配方案都会失效——浏览器默认用 980px 布局视口渲染，rem 和 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或maximum-scale以外的缩放控制，否则某些安卓 WebView 会忽略initial-scale
用 vw 实现最简等比缩放：一行 CSS 就够
vw 单位直接绑定视口宽度，不需要 JS 计算根字号，兼容性也已覆盖 iOS 8+ / Android 4.4+。适合以 750px 设计稿为基准的项目。
典型写法（750px 设计稿 → 100vw = 750px → 1px = 100vw / 750）：
html { font-size: calc(100vw / 7.5); } /* 1rem = 100px（设计稿单位） */
这样写后，设计稿上量的 375px 宽度，就直接写 width: 3.75rem；16px 字体写 font-size: 0.16rem。
- 优势：无 JS、无运行时开销、无缓存失效风险
- 注意点：iOS Safari 在横屏切换时可能有短暂重排，可加
@media (orientation: landscape)微调 - 别用
font-size: 13.333vw这种写法——小数精度在低端机上会导致 1px 偏差累积
rem 方案里最常踩的坑：JS 设置时机和 DPR 干扰
很多老教程用 JS 动态设 document.documentElement.style.fontSize，但实际线上出问题往往不是算法错，而是执行时机不对或被 DPR 扰乱。
- 必须在
DOMContentLoaded之前或同步执行，否则首屏渲染会闪动（先按默认 16px 渲染，再重算） - 别用
window.screen.width：它返回的是设备物理像素宽度（如 iPhone 13 是 1170），不是 CSS 像素（390），直接除会翻倍放大 - 正确取值应是
document.documentElement.clientWidth或window.innerWidth - DPR 不影响
rem计算本身，但会影响图片清晰度和 1px 边框——这是另一个维度的问题，别混在一起调
一个稳妥的初始化片段：
function setRootFontSize() { const width = document.documentElement.clientWidth || window.innerWidth; const size = (width / 750) * 100; // 750 设计稿，1rem = 100px document.documentElement.style.fontSize = size + 'px';}setRootFontSize();window.addEventListener('resize', setRootFontSize);
切图时 rem/vw 换算别硬背，用 PostCSS 自动转
手动把设计稿 px 除以 100 写 rem，或除以 7.5 写 vw，既慢又易错。真实项目中没人这么干。
推荐用 postcss-pxtorem（rem）或 postcss-pxtoviewport（vw）插件，配置好基准值后，源码写 width: 375px，构建时自动转成 width: 5rem 或 width: 50vw。
-
postcss-pxtorem的rootValue设为 100（对应 750px 设计稿下 1rem = 100px） -
postcss-pxtoviewport的viewportWidth设为 750，unitPrecision至少设 5，避免 0.0001rem 截断 - 务必排除
node_modules和第三方 UI 库的 CSS，否则它们的 px 会被误转
最后提醒一句：vw/rem 解决的是「等比缩放」，不是「响应式断点」。按钮在小屏上太挤？那得靠 @media 改布局，不是把 font-size 从 0.16rem 改成 0.14rem 就完事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
