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标签使用。