移动端开发中不同设备的屏幕尺寸、分辨率差异极大，固定像素布局很容易导致页面在大屏设备上显示过小，在小屏设备上出现横向滚动条，用javascript实现屏幕适配可以根据设备实际宽度动态调整布局参数，让页面适配更多终端。
核心适配思路
主流的javascript移动端适配方案基于rem单位实现，rem是相对于根元素html字体大小的单位，默认情况下1rem等于16px。我们只需要根据当前屏幕宽度计算出合适的根元素字体大小，页面中所有使用rem作为单位的元素就会自动按比例缩放，从而适配不同屏幕。
基础适配逻辑
首先我们需要确定一个基准设计稿宽度，通常移动端设计稿宽度会选择750px或者375px，这里以750px设计稿为例，假设设计稿中根元素字体大小基准为100px，也就是设计稿中100px对应1rem。那么当屏幕宽度等于750px时，根元素字体大小设为100px，当屏幕宽度为375px时，根元素字体大小就应该是50px，计算公式如下：
根元素字体大小 = 当前屏幕宽度 / 设计稿宽度 * 基准字体大小
完整实现代码
下面是可直接复用的javascript适配代码，支持实时监听屏幕宽度变化，适配横竖屏切换场景：
// 设计稿宽度，根据实际设计稿调整
const designWidth = 750;
// 设计稿对应的根元素基准字体大小，这里设置100px方便计算，设计稿中100px = 1rem
const baseFontSize = 100;
function setRem() {
// 获取当前屏幕宽度
const screenWidth = document.documentElement.clientWidth || window.innerWidth;
// 计算根元素字体大小，不超过设计稿宽度时的最大基准值
let fontSize = (screenWidth / designWidth) * baseFontSize;
// 限制最大字体大小，避免大屏设备字体过大
if (fontSize > baseFontSize) {
fontSize = baseFontSize;
}
// 设置根元素字体大小
document.documentElement.style.fontSize = fontSize + 'px';
}
// 初始执行一次适配
setRem();
// 监听窗口大小变化，适配横竖屏切换
window.addEventListener('resize', setRem);
// 监听页面加载完成再次执行适配，避免初始计算偏差
window.addEventListener('load', setRem);
代码示例说明
上述代码中首先定义了设计稿宽度和基准字体大小，setRem函数是核心适配逻辑，每次执行时会获取当前屏幕宽度，按照公式计算对应的根元素字体大小，同时做了最大字体限制，避免平板等大屏设备适配后元素过大。之后初始调用一次setRem完成首次适配，再监听resize和load事件，保证屏幕宽度变化或者页面加载完成后都能正确适配。
配合CSS使用方式
javascript设置好根元素字体大小后，CSS中就可以直接使用rem单位编写样式，比如设计稿中有一个宽度为200px的按钮，那么对应的CSS样式可以写成：
.btn {
/* 设计稿200px，基准是100px=1rem，所以200px=2rem */
width: 2rem;
height: 0.8rem;
line-height: 0.8rem;
text-align: center;
background-color: #409eff;
color: #fff;
border-radius: 0.1rem;
}
注意事项
- 设计稿宽度和基准字体大小需要根据实际项目调整，如果设计稿是375px，基准字体大小可以设为37.5px，这样设计稿中375px对应10rem，计算更方便。
- 如果页面中需要固定像素的元素，可以继续使用px单位，不会影响rem布局的适配效果。
- 部分老旧移动端浏览器可能对
rem支持不佳，不过目前主流移动端浏览器都已经完全支持rem单位，不需要额外做兼容处理。 - 如果项目中使用了第三方UI库，需要确认UI库的适配方式，避免和自定义适配逻辑冲突。
javascript移动端适配屏幕适配rem布局修改时间：2026-06-13 14:21:23