本文共 1039 字,大约阅读时间需要 3 分钟。
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S
module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, "postcss-aspect-ratio-mini": {}, "postcss-write-svg": { utf8: false }, "postcss-cssnext": {}, "postcss-px-to-viewport": { viewportWidth: 750, // 容器宽度,也可以看作设计图的宽度 viewportHeight: 1334, // 容器高度,可以不配置 unitPrecision: 3, // px转换为vw后保留的小数位 viewportUnit: 'vw', // px需要转换成的单位,使用vw selectorBlackList: ['.ignore', '.hairlines'], // 不需要转换为其他单位的的class类 minPixelValue: 1, // 小于等于1px不转换 mediaQuery: false // 是否允许在媒体查询中使用px }, "postcss-viewport-units": {}, "cssnano": { preset: "advanced", autoprefixer: false, "postcss-zindex": false } }}
因为在cssnano
中配置了 preset:"advanced"
,所以需要添加一个依赖
npm i cssnano-preset-advanced --save-dev
因为postcss-viewport-units
会在计算vw时自动添加content
内容,但是content
会有一定的副作用,所以添加一个全局的css
img { content: normal !important;}
在html中引用viewport-units-buggyfill
插件
然后调用viewport-units-buggyfill
转载地址:http://ujluz.baihongyu.com/