vue-cli3中的h5页面适配postcss-pxtorem

1、npm插件

官方文档 https://www.npmjs.com/package/postcss-pxtorem

npm run install postcss-pxtorm --save

2、配置方法如下

在vue-cli3中，去掉了build和config文件夹。所有的配置都放到了vue.config.js中（默认为空，如果没有这个文件夹，自己写一个）

先上代码，vue.config.js的配置如下

`css: {

loaderOptions: {

postcss: {

plugins: [

require('postcss-pxtorem')({//这里是配置项，详见官方文档

"rootValue": 16,

// 哪些需要进行px转rem

"propList": ['*'],

// 排除哪些开头的如 .weui-button 等等

"selectorBlackList": ['weui','mu'],

// 最小转换，如低于 4px的不会进行转成rem

"minPixelValue": 4

}),

]

}

}

},`

2、需要写一个公用的rem.js文件

`\

const baseSize = 32; // 这个是设计稿中1rem的大小。

function setRem() {

// 实际设备页面宽度和设计稿的比值

const scale = document.documentElement.clientWidth / 750;

// 计算实际的rem值并赋予给html的font-size

document.documentElement.style.fontSize = (baseSize * scale) + 'px';

}

setRem();

window.addEventListener('resize', () => {

setRem();

});`

3、在main.js中引入

重启项目就ok了

可能遇到的坑：

如果个别地方不想转化px，可以简单的使用大写的PX 或Px