在移动端 单位有时候我们用vw ,cube-ui 默认会安装postcss-px-to-viewport 默认设置是如下
'postcss-px-to-viewport':{
viewportWidth: 375,
viewportHeight: 667 ,
unitPrecision: 5,
viewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false
},
然而通常设计稿是750的,有时候还要用其他UI,也是750的,这个时候我们只需要安装yarn add postcss-design-convert然后在选项中配置如下
'postcss-px-to-viewport':{
viewportWidth: 750,
viewportHeight: 1334 ,
unitPrecision: 5,
viewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false
},
'postcss-design-convert':{
multiple:2,
units:['vw'],
selector:/^\.cube-/
}
这样尺寸就可以直接按750设计尺寸就可以了。
<template>
<div class="home">
<img alt="Vue logo&#