移动端适配

## vw 适配

1. 下载安装 postcss-px-to-viewport 和 postcss-loader

npm install postcss-loader postcss-px-to-viewport --save-dev

 

2. 暴露webpack配置文件

3. 配置webpack 在配置文件147行下面添加

[

  'postcss-px-to-viewport',

  {

    viewportWidth: 750, // (Number) The width of the viewport.

    viewportHeight: 1334, // (Number) The height of the viewport. -- 一般不需要配置

    unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.

    viewportUnit: "vw", // (String) Expected units.

    selectorBlackList: [], // (Array) The selectors to ignore and leave as px.

    minPixelValue: 1, // (Number) Set the minimum pixel value to replace.

    mediaQuery: false // (Boolean) Allow px to be converted in media queries.

  }

]

750 为当前设计稿尺寸 750px = 100vw

## rem 适配

1. 下载安装 lib-flexible postcss-pxtorem

npm install lib-flexible postcss-pxtorem -S

 

2. 暴露配置文件

3.  配置webpack

// 引入postcss-pxtorem

const pxtorem = require('postcss-pxtorem')

在配置文件147行下面添加

      pxtorem({

                    rootValue: 37.5,

                    propWhiteList: [],

                    minPixelValue: 2,

                    exclude: /node_modules/i

                  })

    375px = 10rem

4. 在index.js 入口文件 引入lib-flexible