安装 postcss-px-to-viewport
npm install postcss-px-to-viewport -save
配置 package.json文件
"postcss": { "plugins": { "autoprefixer": {}, "postcss-px-to-viewport": { "viewportWidth": 1920, // 设计稿宽度 "unitPrecision": 5, // px转换后的小数保留位数,有时候不能整除 "minPixelValue": 1 // 小于或等于`1px`时不转换为视窗单位 } } }
其他配置可以自行查询如下列属性等:
mediaQuery: false, // 允许在媒体查询中转换,默认为false propList: ["*"], // 转化为vw的属性列表 viewportUnit: "vw", // 指定转换的单位 fontViewportUnit: "vw", // 字体使用的单位 selectorBlaskList: [".ignore-"], // 指定不需要转换的类
postcss-px-to-viewport的缺点
postcss-px-to-viewport虽然好用,但是却有一个缺点,就是只对style内的样式进行转换,行内样式没办法转换,我还没解决,因为我没写行内样式