rem不会自动缩放，因其依赖html根元素font-size，而浏览器默认16px且不随屏幕变化；需js动态计算clientwidth等比设置根字号，并配合viewport配置、最小字号限制及css合理使用才能实现真正响应式。
为什么直接用 rem 不会自动缩放？
很多人以为只要把字体单位全换成 rem，页面就能随屏幕大小自适应——其实不会。rem 是相对于根元素（html）的 font-size 计算的，而浏览器默认的根字号是 16px，且不会随设备变化。不手动改 html 的 font-size，rem 就只是“固定比例换算”，不是“响应式缩放”。
真正起作用的是 JS 动态设置根字号，再配合 CSS 中的 rem 值。常见做法是按屏幕宽度等比缩放：比如设计稿宽 375px 时设根字号为 100px（即 1rem = 100px），那在 750px 屏幕上就该设为 200px。
如何用 JS 动态计算并设置 html 的 font-size？
核心逻辑是：以某参考宽度（如 375px）为基准，按当前 document.documentElement.clientWidth 等比缩放根字号。注意不是用 window.innerWidth，它可能包含滚动条宽度或被缩放干扰；clientWidth 更稳定。
推荐写法（兼容 iOS Safari 和 Android Chrome）：
function setRootFontSize() {
const baseWidth = 375; // 设计稿宽度
const baseFontSize = 100; // 对应 1rem = 100px
const width = document.documentElement.clientWidth;
const fontSize = (width / baseWidth) * baseFontSize;
document.documentElement.style.fontSize = fontSize + 'px';
}
setRootFontSize();
window.addEventListener('resize', setRootFontSize);
window.addEventListener('orientationchange', setRootFontSize);
几点关键提醒：
-
baseFontSize取 100 是为了方便换算（1rem = 100px → 12px = 0.12rem），也可取 16、37.5 等，但需同步调整所有 CSS 中的rem值 - 必须在
标签渲染前执行，否则首屏会闪动；建议放在内的<script></script>中，或用DOMContentLoaded包裹 -
orientationchange事件不能省——横竖屏切换时resize在部分 iOS 版本中不触发
为什么在某些安卓 WebView 或低版本 iOS 中缩放失效？
典型现象是：JS 正确设置了 html 的 font-size，但文字/布局没变，或者缩放后出现模糊、错位。这通常和两个隐藏因素有关：
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
一是 viewport 缩放被禁用或误配。确保 <meta name="viewport"> 中没有 user-scalable=no，且 initial-scale 设为 1：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
如果加了 user-scalable=no，iOS 会强制禁用页面缩放逻辑，导致 JS 设置的根字号被忽略（尤其在双击放大后）。
二是字体渲染受系统最小字号限制。Android 系统（尤其旧版 WebView）会强制将小于 12px 的字体显示为 12px，即使 CSS 设置了 font-size: 0.1rem（对应 10px）。解决办法是：
- 避免让
rem计算结果低于 12px；可通过 JS 限制最小根字号，例如：Math.max(12, fontSize) - 对极小文字（如标签、提示）改用
px或em，不参与全局缩放
CSS 中怎么写才能让 rem 真正“好用”？
不是所有地方都适合无脑替换为 rem。以下场景需要特别处理：
- 边框（
border）：用rem会导致不同屏幕下边框粗细差异过大（比如 1px 在高清屏变成 2px），建议统一用1px或0.01rem（配合 JS 保证最小值） - 圆角（
border-radius）：同理，0.1rem在小屏可能太尖，大屏又太钝，可考虑用px固定或用媒体查询分段控制 - 图片宽高：若用
rem，图片可能被拉伸；更稳妥的是用%或vw配合max-width - 行高（
line-height）：建议用无单位数值（如1.5），而不是1.5rem，避免继承链中字号变化引发意外缩放
另外，别忘了在 CSS 开头加一句重置：
html { font-size: 100px; } /* 仅为 fallback，JS 加载失败时不至于全乱 */
最常被忽略的一点：缩放逻辑只解决“等比缩放”，不解决“视觉一致性”。比如 375px 设计稿里的按钮高度 44px，在 414px 屏幕上变成 48px，用户手指点击区域变大了，但 App 原生控件未必同步变大——这时候需要结合平台规范做微调，不能只依赖一套公式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
