vue实现rem适配
Vue 项目中实现 REM 适配
REM（Root EM）是一种基于根元素（html）字体大小的相对单位，常用于移动端适配。以下是在 Vue 项目中实现 REM 适配的详细方法。
安装 postcss-pxtorem 插件
postcss-pxtorem 是一个 PostCSS 插件，用于将 px 单位自动转换为 rem 单位。安装该插件：
npm install postcss-pxtorem --save-dev配置 postcss-pxtorem
在项目根目录下的 postcss.config.js 文件中配置 postcss-pxtorem：
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 16, // 设计稿宽度 / 10，例如设计稿为 750px，则设为 75
propList: ['*'], // 需要转换的属性，* 表示所有属性
selectorBlackList: [], // 忽略的选择器
minPixelValue: 2, // 小于 2px 不转换
},
},
};动态设置根字体大小
在项目的入口文件（如 main.js）中动态设置根字体大小，确保页面根据设备宽度自适应：
function setRem() {
const baseSize = 16; // 基准大小，与 postcss-pxtorem 的 rootValue 一致
const scale = document.documentElement.clientWidth / 375; // 设计稿宽度为 375px
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';
}
setRem();
window.addEventListener('resize', setRem);使用 REM 单位编写样式
在 Vue 组件的样式中直接使用 px 单位，postcss-pxtorem 会自动将其转换为 rem：
.container {
width: 375px; /* 转换为 rem */
font-size: 16px; /* 转换为 rem */
}可选：使用 lib-flexible 库
lib-flexible 是淘宝团队开发的移动端适配库，可以自动设置根字体大小。安装并配置：
npm install lib-flexible --save在 main.js 中引入：
import 'lib-flexible';注意事项
- 设计稿宽度通常为 375px 或 750px，需根据实际情况调整
rootValue。 - 避免在不需要转换的地方使用 px 单位，可通过
selectorBlackList配置忽略。 - 测试时需检查不同设备下的显示效果，确保适配无误。
