Rem布局通过动态设置html的font-size实现移动端适配，核心是根据设备宽度按比例调整rem基准值，结合viewport元标签和JavaScript计算，使页面元素等比缩放，配合预处理器可自动化转换px为rem，确保多设备一致性。
移动端适配是前端开发中常见的需求，尤其在不同尺寸的手机屏幕上保持页面布局的一致性。使用 Rem 布局 是一种成熟且广泛采用的方案。Rem（font-size of the root element）是相对于根元素（html）字体大小的单位，通过动态调整 html 的 font-size，可以实现页面元素的等比缩放，从而达到适配效果。
Rem 原理与基本思路
Rem 的大小由 html 标签的 font-size 决定，默认浏览器 font-size 为 16px，即 1rem = 16px。适配的核心思想是：根据设备屏幕宽度动态设置 html 的 font-size，使 1rem 对应当前屏幕的一个相对单位，从而让所有使用 rem 的元素自动缩放。
例如：设计稿为 750px 宽，我们希望 750px 宽度对应 html 的 font-size 为 75px，则 1rem = 75px，那么 375px 的元素就是 5rem。
动态设置 html 的 font-size
通过 JavaScript 获取设备的屏幕宽度，并计算出对应的 font-size 值，然后设置到 html 元素上。
示例代码：
function setRem() { const designWidth = 750; // 设计稿宽度 const remSize = 75; // 1rem 对应的像素值（如 750 / 10 = 75） const scale = document.documentElement.clientWidth / designWidth; document.documentElement.style.fontSize = remSize * scale + 'px';}// 页面加载和窗口变化时执行window.addEventListener('resize', setRem);window.addEventListener('DOMContentLoaded', setRem);
这段代码会在页面加载和窗口大小变化时，根据当前屏幕宽度按比例设置 html 的字体大小。比如在 375px 宽的屏幕上，scale = 375 / 750 = 0.5，font-size = 75 * 0.5 = 37.5px，此时 1rem = 37.5px。
CSS 中使用 rem 单位
在 CSS 中，将原本用 px 的尺寸转换为 rem。推荐使用预处理器（如 Sass、Less）或 PostCSS 插件自动转换。
假设设计稿中一个 div 宽 150px，高 100px，边距 20px：
.box { width: 2rem; /* 150 / 75 = 2 */ height: 1.333rem; /* 100 / 75 ≈ 1.333 */ margin: 0.267rem; /* 20 / 75 ≈ 0.267 */}
这样在不同设备上，.box 会随 rem 缩放而等比变化。
配合 meta viewport 使用
确保页面正确缩放，必须设置 viewport：
这句 meta 标签会让浏览器将页面宽度设为设备独立像素宽度，是 rem 适配的基础。
优化与注意事项
实际项目中可做以下优化：
限制 font-size 的最小和最大值，避免极端设备上文字过小或过大使用防抖优化 resize 事件性能结合 dpr 设置缩放，提升高清屏显示效果（可选）使用 PostCSS 插件（如 postcss-pxtorem）自动将 px 转为 rem，减少手动计算
基本上就这些。Rem 布局简单可控，适合大多数移动端 H5 场景，关键是统一设计稿基准和开发规范。不复杂但容易忽略细节，比如 viewport 和动态计算的同步问题。
以上就是JS移动端适配_Rem布局实现方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1538960.html
微信扫一扫 
支付宝扫一扫 
