核心逻辑是动态设置document.documentElement.style.fontSize，使其按设计稿宽度与视口宽度的比值等比缩放，从而驱动所有rem单位元素全局等比变化。
rem 全屏缩放的核心逻辑是什么
rem 是相对于根元素 html 的 font-size 计算的单位。要实现“全屏等比例缩放”，本质是让整个页面所有 rem 单位的尺寸（文字、间距、宽高）随视口变化同步缩放，而关键控制点只有一个：动态设置 document.documentElement.style.fontSize。
这个值不能随便设 —— 它必须与设计稿基准、设备物理宽度、缩放目标严格对应。常见错误是直接用 window.innerWidth 除以某个固定数，结果在 iPad Pro 或折叠屏上失真，或在 zoom ≠ 100% 的浏览器里错乱。
真正可靠的起点是明确两个前提：
- 你的设计稿宽度（例如
750px），这是所有 rem 值的换算源头 - 你希望「1rem」最终对应多少真实像素（例如
1rem = 10px在 750px 设计稿下）
JavaScript 动态计算 font-size 的标准写法
最常用且兼容性好的方案是：以设计稿宽度为基准，按视口宽度等比缩放 html 的 font-size，再通过媒体查询兜底处理大屏或小屏极端情况。
立即学习“Java免费学习笔记（深入）”；
典型实现如下：
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
function setRem() {
const baseWidth = 750; // 设计稿宽度
const baseFontSize = 10; // 设计稿中 1rem 对应的 px 值（即 750px → 10 * 75 = 750px）
const scale = document.documentElement.clientWidth / baseWidth;
document.documentElement.style.fontSize = `${baseFontSize * scale}px`;
}
setRem();
window.addEventListener('resize', setRem);
window.addEventListener('orientationchange', setRem);注意几个关键点：
- 用
document.documentElement.clientWidth，不是window.innerWidth—— 后者含滚动条宽度，在 PC 端可能跳变 - 不依赖
devicePixelRatio直接干预 —— rem 缩放本身不解决高清屏渲染，那是image-set或srcset的事 - 必须监听
orientationchange，iOS Safari 横竖屏切换时不会触发resize
为什么 CSS 里要配合使用 max-width 和 media query
单纯靠 JS 设置 font-size 会导致大屏（如 4K 显示器）下文字过大、按钮过宽，小屏（如 iPhone SE）下内容挤成一团。这不是 JS 算错了，而是“等比缩放”本身没有边界意识。
正确做法是在 CSS 中加约束：
html {
font-size: 10px; /* fallback */
}
@media screen and (min-width: 750px) {
html {
font-size: calc(10px * (100vw / 750));
}
}
@media screen and (min-width: 1200px) {
html {
font-size: 16px; /* 上限，防止过大 */
}
}
@media screen and (max-width: 375px) {
html {
font-size: 5px; /* 下限，防止过小 */
}
}这样 JS 负责主逻辑，CSS 负责兜底和体验微调。两者不是互斥，而是分层协作。
容易被忽略的三个坑
实际项目中最常栽跟头的地方往往不在算法，而在环境细节：
-
body有默认 margin，会干扰全屏视觉对齐 —— 必须重置：body { margin: 0; } - 部分安卓 WebView 对
font-size动态修改响应延迟，建议在DOMContentLoaded后立即执行一次setRem()，别只靠load - 使用
vh/vw混搭 rem 时要注意：iOS Safari 在地址栏收起/展开时会触发vh变化，但不触发resize，导致布局错位 —— 此时需额外监听scroll或用visualViewportAPI 补偿
复杂点在于缩放不是纯数学问题，而是设计约束、设备特性、浏览器行为共同作用的结果。把 font-size 算对只是第一步，后续的边界控制和异常适配才是决定体验是否稳定的关键。
