前端移动端适配使用amfe-flexible和postcss-px2rem

一、安装

npm install amfe-flexible -S
npm install postcss-px2rem -S

postcss-px2rem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据标签的font-size值来计算出结果，1rem=html标签的font-size值

二、第二步引入 lib-flexible

在入口main.js中 引入 lib-flexible
import "amfe-flexible";

注意事项（important）: 由于flexible会动态给页面header中添加标签，所以务必请把目录 public/index.html 中的这个标签删除！！！

三、配置postcss-px2rem

vue-cli3 配置
px2rem的配置放在vue-cli3 项目中vue.config.js中（找不到？可能你是一个新构建的项目，需要手动在项目根目录创建vue.config.js）
具体配置内容如下：
postcss-pxtorem 在postcss.config.js中配置

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

vue-cli2 配置

找到根目录下.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*']
    }
  }
}

propList 表示不匹配 要是想匹配边框之类的 可以在里面用 !border* 表示不配备边框，这样不会把边框1px变成1rem

四、使用方法

使用时设计图750px的，那设计图要是300px的宽度，那代码里面写成300px。

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

.nav {
  width: 400px;
  height: 300px;
  background: red;
  border: 1px solid black; /*no*/
}

踩坑
后期，发现自己要用vantUI框架，而当我引入之后，发现所有的组件样式都比样例要小，一开始很是懵逼 后来查询之后发现，原来是因为vantUI的根字体默认大小是37.5，和我们默认设置的75不一样，正好是2倍关系，所以当我们的设计图是750的时候，我们的组件就会看起来是1/2的大小，解决这种问题有三种方法：

1、自己要用vant，设置为37.5，在使用ui的设计图时，用1/2的单位来布局，这种显然是个很鸡肋的办法，简言之：可以但没必要！ – 作者君就是用的这种方法

2、不用px2rem-loader和lib-flexible搭配，而是使用：lib-flexible和postcss-pxtorem搭配，因为lib-flexible和postcss-pxtorem里面有一个过滤功能，可以让我们过滤掉以van开头的样式：在引入的postcssrc.js里面设置：

module.exports={
　　plugins:{
　　　　'postcss-pxtorem':{
　　　　　　rootValue:75,
　　　　　　propList:['*'],
　　　　　　selectorBlackList:['van','weui','mu'] // 忽略转换正则匹配项
　　　　}
　　}
}

3、第三种办法就是使用判断条件，依然是在postcssrc.js里面修改：

const AutoPrefixer = require("autoprefixer");
const px2rem = require("postcss-px2rem");
module.exports = ({ file }) => {
　　let remUnit;
　　// 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试
　　//link https://github.com/youzan/vant/issues/1181
　　if (file && file.dirname && file.dirname.indexOf("vant") > -1) {
　　　　remUnit = 37.5;
　　}else {
　　　　remUnit = 75;
　　}
　　return {
　　　　plugins: [
　　　　　　px2rem({ remUnit: remUnit}),
　　　　　　AutoPrefixer({ browsers: ["last 20 versions", "android >= 4.0"] })
　　　　]
　　};
};

postcss-pxtorem (Star1.5k)和postcss-px2rem (Star536)
使用postcss-pxtorem 时的 vue.config.js 配置：

module.exports = {
    lintOnSave: true,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({//这里是配置项，详见官方文档
                        rootValue : 1, // 换算的基数
                        selectorBlackList  : ['weui','mu'], // 忽略转换正则匹配项
                        propList   : ['*'],
                    }),
                ]
            }
        }
    },
}

使用postcss-px2rem 时的 vue.config.js 配置：

module.exports = {
    lintOnSave: true,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-px2rem')({ //配置项，详见官方文档
                        remUnit: 30
                    }), // 换算的基数
                ]
            }
        }
    },
}