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

·  阅读 90

1、npm插件 官方文档 www.npmjs.com/package/pos… 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中引入

image.png

重启项目就ok了

可能遇到的坑: 如果个别地方不想转化px,可以简单的使用大写的PX 或Px

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改