随着移动设备种类的增多，如何实现页面在不同屏幕尺寸上的自适应展示，成为前端开发中不可回避的问题。本文将基于 rem 自适应布局的常用实践，结合 vw 和 rpx 等单位的方案，对比优劣，帮助你根据项目场景选择合适的方案。
📐 一、rem 方案原理与实现rem 是什么？rem（root em）是相对于根元素 的字体大小 font-size 来计算的单位。通过动态设置根元素的 font-size，可以让页面元素根据屏幕宽度等比缩放，达到响应式效果。
实现方式一：JavaScript 动态设置 1
2
3
4
5
6
7
8
9
10
11
(function () {
function setRemUnit() {
const docEl = document.documentElement;
const width = docEl.clientWidth;
const rem = width / 10; // 设计稿为 375px 时推荐除以 37.5
docEl.style.fontSize = rem + 'px';
}
setRemUnit();
window.addEventListener('resize', setRemUnit);
})();
实现方式二：配合 PostCSS 自动转换 px→rem使用 postcss-pxtorem 插件，在构建时自动将样式中的 px 转换为 rem，无需手写转换。
安装： 1
npm install postcss-pxtorem --save-dev
配置（postcss.config.js）： 1
2
3
4
5
6
7
8
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
},
},
};
🔧 二、配套库：amfe-flexible（或 lib-flexible）amfe-flexible 是阿里出品的适配库，会根据设备宽度自动设置 的 font-size，常与 postcss-pxtorem 配套使用。
安装： 1
npm install amfe-flexible --save
引入方式： 1
import 'amfe-flexible';
📊 三、其他单位方案比较单位优点缺点场景推荐rem自适应灵活、兼容性好需额外设置 html font-sizeVue/React 项目vw/vh不依赖 JS，计算直观字体缩放受限，兼容性差异H5 页面rpx微信生态原生支持仅适用于 uniapp、小程序小程序、uniapp🖼️ 四、高分辨率图片处理方案使用 CSS 媒体查询加载多倍图 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.bg {
background-image: url(bg@1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.bg {
background-image: url(bg@2x.png);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
.bg {
background-image: url(bg@3x.png);
}
}
使用 srcset 响应式图片 1
🧩 五、uniapp 中的 rpx 实现在 uniapp 中，rpx 是官方推荐单位，1rpx = 屏幕宽度的 1/750。
使用方式： 1
自动 px → rpx 转换： 1
npm install postcss-px2rpx --save-dev
配置 postcss.config.js：
1
2
3
4
5
6
7
8
module.exports = {
plugins: {
'postcss-px2rpx': {
baseDpr: 2,
rpxUnit: 0.5,
},
},
};
🧠 总结方案优点缺点适用场景rem + flexible灵活、兼容性好依赖 JS 和构建工具Vue/React 项目vw/vh无需 JS，单位直观字体缩放问题静态页面rpx微信生态支持好局限在小程序uniapp、小程序