- 安装
npm install postcss-px-to-viewport --save-dev
- 项目根目录下新增 postcss.config.js 文件
- postcss.config.js文件内容
module.exports = { plugins: { autoprefixer: {}, 'postcss-px-to-viewport': { viewportWidth: 1920, // 视窗的宽度,对应的是我们设计稿的宽度. viewportHeight: 1080, // 视窗的高度,对应的是我们设计稿的高度.(也可以不配置) unitPrecision: 5, // 保留几位小数,指定`px`转换为视窗单位值的小数位数(很多时候无法整除) viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用vw selectorBlackList: ['tab-bar', 'tab-bar-item', 'shopping-cart-bottom-bar'], // 指定不需要转换的类 minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位. mediaQuery: false // 允许在媒体查询中转换`px` } } }
postcss-px-to-viewport,将px单位自动转换成viewport单位
于 2022-03-24 18:44:46 首次发布