## 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