移动端适配JavaScript_REM布局算法-js教程-PHP中文网

移动端适配JavaScript_REM布局算法

betcha

发布： 2025-11-27 08:12:06

原创

975人浏览过

答案：REM布局通过JavaScript动态设置html字体大小，使rem单位随屏幕尺寸缩放，适配移动端。以设计稿750px为基准，按比例计算font-size，限制最大宽度防过度拉伸，结合viewport和CSS预处理器提升开发效率与兼容性。

移动端适配javascript_rem布局算法

移动端适配使用 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 中执行：

立即学习“Java免费学习笔记（深入）”；

多个微信小程序源码合集

微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，旨在提供便捷的用户体验，无需下载安装即可在微信内使用。本压缩包包含了丰富的源码资源，涵盖了多个领域的应用场景，下面将逐一介绍其中涉及的知识点。1. 图片展示：这部分源码可能涉及了微信小程序中的``组件的使用，用于显示图片，以及`wx.getSystemInfo`接口获取屏幕尺寸，实现图片的适配和响应式布局。可能还包括了图片懒加

查看详情

(function (win, doc) {
  function setRem() {
    const designWidth = 750; // 设计稿宽度
    const maxWidth = 540;     // 最大允许显示宽度，防止过大屏幕拉伸过度
    const scale = doc.documentElement.clientWidth / designWidth;
<pre class='brush:php;toolbar:false;'>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 使用：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
部分安卓机存在 rem 计算精度问题，可考虑四舍五入或使用 transform 缩放替代
现代项目可考虑使用 CSS @media 查询 + 百分比布局，或结合 vw/vh 单位简化逻辑

基本上就这些，这套 REM 适配方案简单有效，适合大多数移动端 H5 项目。

以上就是移动端适配JavaScript_REM布局算法的详细内容，更多请关注php中文网其它相关文章！