antd mobile 高清方案

前言
高清方案就是根据设备屏幕的DPR（设备像素比，又称DPPX，比如dpr=2时，表示1个CSS像素由4个物理像素点组成） 动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值，进而达到高清效果。

在做react开发时，我们会用antd-mobile库来简化前端的书写。但是antd-mobile仍然以px为单位，本文章教大家如何将antd-mobile的px全部转换为rem。

在antm-mobile中，样式保存在.css和.less文件中，我们的思路就是把所有.css.和less文件的px转换为rem。

一、引入viewport.js
我们在index.html中引入两个js文件中的一个，就完成了rem布局的引入，这个文件规定100px==1rem。
antm-viewport.js
antm-viewport.min.js
二、更改webpack配置
1.首先我们先注入依赖
"postcss": "^5.2.17",
"postcss-loader": "^1.3.3",
"postcss-pxtorem": "^3.3.1",

其中就包含了将px转为rem的方法以及postcss的相关配置。

2.接下来我们来修改webpack参数：
①如果项目通过atool-build构建，直接在webpack.config.js中添加以下代码即可

 const pxtorem = require('postcss-pxtorem');
 webpackConfig.postcss.push(pxtorem({
   rootValue: 100,
   propWhiteList: [],
 }));

②如果项目通过webpack构建，在webpack.config.js中的指定位置添加以下代码

module.exports = {
  plugins:[
     new webpack.LoaderOptionsPlugin({
        options: {
          postcss: function () {
            return [pxtorem({
              rootValue: 100,
              propWhiteList: [],
            })];
          }
        }
        })
  ]
}

module: {
   rules: [
      {
        test: /\.css$/,
        use: [
          {loader: 'style-loader?sourceMap'},
          {loader: 'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'},
          {loader: 'postcss-loader'}

          ]
      },
      {
        test: /\.less$/,
        use: [
          {loader: 'style-loader?sourceMap'},
          {loader: 'css-loader'},
          {loader: 'postcss-loader'},
          {loader: 'less-loader'}
        ]
      }
    ]
}

注意
{loader: 'postcss-loader'}一定要在 {loader: 'less-loader'}上方添加，不然会报错。

结语
通过这两步，我们就把.css和.less文件中的px转换为rem了。