移动端px自动转换为rem

复制粘贴 from 

1.zhuanlan.zhihu.com/p/76833513

2.www.jianshu.com/p/f4093192e…

安装

yarn add amfe-flexible 
yarn add postcss-px2rem

引入 lib-flexible

import 'amfe-flexible/index.js'

在根目录的index.html 的头部加入手机端适配的meta代码

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

配置postcss-px2rem

vuecli3 配置

在postcss.config.js中配置

module.exports = {
    css: {
        loaderOptions: {
          css: {},
          postcss: {
        plugins: [
          require("postcss-px2rem")({
            remUnit: 75
          })
        ]
      }
        }
    }
}

此处需要注意的是px2remloader的remUnit属性，此处填写的是设计稿宽度的十分之一，例如设计稿宽度是750，这里填写75

vuecli2 配置

根目录下.postcssrc.js文件

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-url': {},
    // to edit target browsers: use "browserslist" field in package.json
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 75,
      propList: ['*', '!border*']
    }
  }
}

此处需要注意的是px2remloader的remUnit属性，此处填写的是设计稿宽度的十分之一，例如设计稿宽度是750，这里填写75

使用方法

按照上面的步骤写完后，使用时设计图750px的，那设计图要是300px的宽度，那代码里面写成300px。这样就可以了

不想匹配，也就是不想把px变为rem,可以这样

p {
  width: 400px; /*no*/
}