移动端适配JavaScript_REM布局算法
答案：REM布局通过JavaScript动态设置html字体大小，使rem单位随屏幕尺寸缩放，适配移动端。以设计稿750px为基准，按比例计算font-size，限制最大宽度防过度拉伸，结合viewport和CSS预处理器提升开发效率与兼容性。
移动端适配使用 REM 布局 是一种常见的响应式方案，核心是通过动态设置根元素（html）的字体大小，让页面中所有使用 rem 单位的元素自动缩放，从而适配不同屏幕尺寸。JavaScript 配合 REM 可实现灵活、精准的移动端适配。
REM 布局原理
rem（root em）是相对于根元素 html 的字体大小的单位。如果 html 的 font-size 为 16px，那么 1rem = 16px。通过 JavaScript 动态调整 html 的 font-size，就能控制整个页面的布局比例。
常见做法是以设计稿为基础（如 750px 宽），将页面等比缩放到不同设备上显示。
动态设置 REM 的 JavaScript 算法
以下是一个典型的 REM 适配脚本，通常放在页面头部或入口 JS 中执行：
(function (win, doc) {
function setRem() {
const designWidth = 750; // 设计稿宽度
const maxWidth = 540; // 最大允许显示宽度，防止过大屏幕拉伸过度
const scale = doc.documentElement.clientWidth / designWidth;
let fontSize = scale * 100; // 按比例计算 fontSize
// 限制最大字体大小，避免在大屏上过大
if (doc.documentElement.clientWidth > maxWidth) {
fontSize = maxWidth / designWidth * 100;
}
doc.documentElement.style.fontSize = fontSize + 'px';}
// 页面加载和窗口变化时设置 rem
win.addEventListener('resize', setRem);
win.addEventListener('DOMContentLoaded', setRem);
setRem(); // 立即执行一次
})(window, document);
关键参数说明
- designWidth：设计稿基准宽度，通常为 750px（iPhone 6/7/8 视觉稿常见值）
- scale：当前屏幕宽度与设计稿的比例，用于计算缩放系数
- fontSize = scale * 100：将 1rem 对应到设计稿上的 100px，例如：设计稿中 100px 元素写成 1rem
- maxWidth 限制：防止在平板或大屏手机上内容过大，提升体验
CSS 使用建议
编写样式时，所有尺寸都基于设计稿换算成 rem：
- 设计稿 750px 宽，一个 div 宽 375px → 写成 3.75rem
- 文字 28px → 0.28rem
- margin 20px → 0.2rem
也可以配合预处理器（如 Sass）写 mixin 或函数自动转换 px 到 rem。
注意事项
- 确保 script 在 DOM 渲染前执行，最好放在 head 中，避免页面闪烁
- 结合 viewport meta 使用：
- 部分安卓机存在 rem 计算精度问题，可考虑四舍五入或使用 transform 缩放替代
- 现代项目可考虑使用 CSS @media 查询 + 百分比布局，或结合 vw/vh 单位简化逻辑
基本上就这些，这套 REM 适配方案简单有效，适合大多数移动端 H5 项目。
