安裝postcss-px-to-viewport
npm install postcss-px-to-viewport -D
postcss.config.js文件中增加配置
module.exports = {
? plugins: {
? ? autoprefixer: {}
? },
? "postcss-px-to-viewport": {
? ? unitToConvert: "px", // 默認(rèn)值`px`阔加，需要轉(zhuǎn)換的單位
? ? viewportWidth: 375, // 視窗的寬度,對(duì)應(yīng)設(shè)計(jì)稿寬度
? ? viewportHeight: 667, // 視窗的高度, 根據(jù)375設(shè)備的寬度來指定，一般是667胜榔，也可不配置
? ? unitPrecision: 3, // 指定`px`轉(zhuǎn)換為視窗單位值的小數(shù)位數(shù)
? ? propList: ["*"], // 轉(zhuǎn)化為vw的屬性列表
? ? viewportUnit: "vw", // 指定需要轉(zhuǎn)換成視窗單位
? ? fontViewportUnit: "vw", // 字體使用的視窗單位
? ? selectorBlaskList: [".ignore-"], // 指定不需要轉(zhuǎn)換為視窗單位的類
? ? mediaQuery: false, // 允許在媒體查詢中轉(zhuǎn)換`px`
? ? minPixelValue: 1, // 小于或等于`1px`時(shí)不轉(zhuǎn)換為視窗單位
? ? replace: true, // 是否直接更換屬性值而不添加備用屬性
? ? exclude: [], // 忽略某些文件夾下的文件或特定文件
? ? landscape: false, // 是否添加根據(jù)landscapeWidth生成的媒體查詢條件 @media (orientation: landscape)
? ? landscapeUnit: "vw", // 橫屏?xí)r使用的單位
? ? landscapeWidth: 1134 // 橫屏?xí)r使用的視窗寬度
? }
};
