vue实现rem适配
vue实现rem适配的方法
在Vue项目中实现rem适配，可以通过以下步骤完成。rem（root em）是基于根元素（html）的字体大小进行计算的单位，能够实现页面的弹性布局。
安装postcss-pxtorem插件
postcss-pxtorem是一个PostCSS插件，用于将px单位自动转换为rem单位。安装命令如下：
npm install postcss-pxtorem --save-dev配置postcss-pxtorem
在项目根目录下的postcss.config.js文件中添加配置。如果没有该文件，可以新建一个。配置示例如下：
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 16, // 设计稿宽度 / 10，例如设计稿宽度为750px，则设置为75
propList: ['*'], // 需要转换的属性列表，*表示全部
selectorBlackList: [], // 不转换的选择器，如.el-button
},
},
};动态设置根字体大小
在项目的入口文件（如main.js）中，添加以下代码动态设置html的字体大小：
function setRem() {
const baseSize = 16; // 基准值，与postcss-pxtorem中的rootValue一致
const scale = document.documentElement.clientWidth / 1920; // 设计稿宽度
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';
}
setRem();
window.addEventListener('resize', setRem);使用rem单位编写样式
在Vue组件的样式中，直接使用px单位编写代码，postcss-pxtorem会自动将其转换为rem单位。例如：
.container {
width: 750px; /* 转换为rem */
padding: 20px; /* 转换为rem */
}注意事项
- 设计稿的宽度通常为750px或1920px，根据实际情况调整
rootValue和动态计算的比例。 - 对于不需要转换的样式，可以通过
selectorBlackList排除。 - 移动端适配时，可能需要结合viewport的meta标签使用。
