REM布局算法解析与适配技巧

本篇文章向大家介绍《移动端适配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 项目。

本篇关于《REM布局算法解析与适配技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！