vue实现rem适配
Vue 项目中实现 REM 适配
REM（Root EM）是一种基于根元素（html）字体大小的相对单位，常用于移动端适配。以下是在 Vue 项目中实现 REM 适配的详细方法。
安装 postcss-pxtorem 插件
通过 npm 或 yarn 安装 postcss-pxtorem 插件，该插件用于将 CSS 中的 px 单位自动转换为 rem 单位。
npm install postcss-pxtorem --save-dev配置 postcss.config.js
在项目根目录下创建或修改 postcss.config.js 文件，添加以下配置：
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 16, // 基准值，通常设为设计稿宽度的 1/10
propList: ['*'], // 需要转换的属性列表，* 表示所有属性
selectorBlackList: [], // 忽略的选择器
minPixelValue: 2, // 小于 2px 不转换
},
},
};动态设置根字体大小
在项目的入口文件（如 main.js）中，添加以下代码动态设置 html 的字体大小：
function setRem() {
const baseSize = 16; // 基准值，与 postcss.config.js 中的 rootValue 一致
const scale = document.documentElement.clientWidth / 375; // 设计稿宽度通常为 375px
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';
}
setRem();
window.addEventListener('resize', setRem);在 CSS 中使用 REM 单位
在 Vue 组件的样式部分，直接使用 px 单位，postcss-pxtorem 会自动将其转换为 rem 单位。例如：
.container {
width: 375px; /* 转换为 23.4375rem (375 / 16) */
height: 200px; /* 转换为 12.5rem (200 / 16) */
}注意事项
- 设计稿的宽度通常为 375px（iPhone 6/7/8 尺寸），可根据实际需求调整。
- 动态设置根字体大小时，需确保页面加载完成后执行，避免布局错乱。
- 对于不需要转换的样式，可通过 selectorBlackList 或 minPixelValue 配置排除。
通过以上步骤，Vue 项目即可实现 REM 适配，确保页面在不同设备上按比例缩放。
