postcss-px-to-viewport可以将px自动转化为vw或vh
安装此插件,然后在项目根目录下创建 postcss.config.js 文件,配置 postcss-px-viewport 插件:
module.exports = {
plugins: {
"postcss-px-to-viewport": {
viewportWidth: 375,//设计稿的宽度
unitPrecision: 6,//单位转换后保留的精度
unitToConvert: "px",//要转化的单位
propList: ["*"],
},
},
};
propList
: 当有些属性的单位我们不希望转换的时候,可以添加在数组后面,并在前面加上!号,如propList: ["*","!letter-spacing"]
,这表示:所有css属性的属性的单位都进行转化,除了letter-spacing
的
注意:行内样式中的 px 无法转换