1.npm install lib-flexible (让网页根据设备dpr和宽度,利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备)
在main.js引入中:import 'lib-flexible/flexible.js'
2.npm install postcss-pxtorem
在package.json内,在postcss内添加:
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 75, // 设计稿宽度的1/10,(JSON文件中不加注释,此行注释及下行注释均删除)
"selectorBlackList": [ "vant" ],//忽略转rem项,列表中不进行转rem
"propList":["*"] // 需要做转化处理的属性,如`hight`、`width`、`margin`等,`*`表示全部
}
}
},
3.使用 postcss-px-to-viewport 注意:移动端用方便,不过在pc端会出新字体过大的现象
npm install postcss-px-to-viewport
package.json中,在postcss中添加代码:
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px-to-viewport": {
"viewportWidth": 750,
"minPixelValue": 1
}
}
},