移动端适配的处理

最近在用vue写适配移动端的h5页面，以前写的时候，都是用百分比来处理适配，现在准备简单一点。特整理一下我处理移动端适配的方法。

调研了各种方法，决定采用px2rem和lib-flexible来处理适配，据说是手淘来处理移动端适配的模式。

需要用到的包：

• postcss-px2rem
• lib-flexible

1、配置lib-flexible

lib-flexible这个包，可以根据页面尺寸和dpr，自动设置html的字体和meta缩放比例。

npm install lib-flexible -S;

// main.js中引入lib-flexible 
import 'lib-flexible';

2、配置postcss-px2rem

首先你得确保你的项目里添加了css的后处理器，需要安装postcss 和postcss-loader以及我们要用的postcss-px2rem

npm install postcss postcss-loader postcss-px2rem

在webpack的module.rule里添加后处理的loader

 config.module.rules.push({
   test: /\.css$/,
   loader: 'postcss-loader',
 });

以及在postcss.config.js里添加处理

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px2rem': {
      remUnit: 37.5,
      rootValue: 37.5, // 设计稿宽度的1/10
      unitPrecision: 5, //小数位
      minPixelValue: 1, //转换的最小单位
      selectorBlackList: [], //忽略的样式, 正则
      propList: ['*'], // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部，正则
    },
  },
};