vue实现rem适配

vue实现rem适配的方法

安装postcss-pxtorem插件

在项目根目录下运行命令安装插件：

npm install postcss-pxtorem -D

配置postcss.config.js

在项目根目录创建或修改postcss.config.js文件：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // 设计稿宽度/10，如375设计稿就写37.5
      propList: ['*'],
      selectorBlackList: ['.norem'] // 过滤掉.norem开头的class，不进行rem转换
    }
  }
}

创建rem.js工具文件

在src/utils目录下创建rem.js文件：

// 基准大小
const baseSize = 37.5
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 375 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 375
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function() {
  setRem()
}

在main.js中引入rem.js

在项目入口文件main.js中添加：

import '@/utils/rem.js'

编写CSS时直接使用px单位

在编写样式时直接使用px单位，插件会自动转换为rem：

.title {
  font-size: 14px; /* 会自动转换为rem单位 */
}

注意事项

设计稿尺寸建议使用375px宽度（iPhone6/7/8尺寸），这样rootValue设置为37.5时，1rem=37.5px。如果是750px的设计稿，rootValue应设置为75。

不需要转换的样式可以添加.norem前缀：

.norem {
  border: 1px solid #ccc; /* 不会被转换为rem */
}