VUE中Rem 适配解决方案

此方案是借助两个插件，将px进行转化为rem。

• lib-flexible 用于设置 rem 基准值。由淘宝手机前端开发团队编写的。
• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem。

一、lib-flexible 

   Install

npm i -S amfe-flexible

   Import

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="./node_modules/amfe-flexible/index.js"></script>

//或者
import 'amfe-flexible'; //引入rem自适应

二、postcss-pxtorem

 Install

npm install postcss-pxtorem --save-dev

   Import

在vue-cli2下，根目录中的 .postcss.js (没有，就新建一个)

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-pxtorem": { // 此处为添加部分
      rootValue: 37.5, // 对应16px 适配移动端750px宽度
      unitPrecision: 5,
      propList: ['*'],
      selectorBlackList: [],
      replace: true,
      mediaQuery: false,
      minPixelValue: 0
    }
  }
}

在vue-cli3下,根目录中的 vue.config.js (没有，就新建一个)

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({ // 把px单位换算成rem单位
            rootValue: 37.5, // 换算的基数(设计图750的根字体为32)
            selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
            propList: ['*']
          })
        ]
      }
    }
  }
}