px2vw--------css單位轉換
為了移動端適配，我們可以使用postcss-px-to-viewport插件來進行px-vw的單位轉換
文檔指路------>GitHub安裝postcss-px-to-viewport
npm install postcss-px-to-viewport --save-dev配置postcss.config.js
module.exports = { plugins: { autoprefixer: {}, "postcss-px-to-viewport": { viewportWidth: 375, //視窗的寬度，對應我們設計稿的寬度，一般指retina（一個點兩個像素），寬度750 viewportHeight: 667, //視窗的高度，對應我們設計稿的高度，可以不配置 unitPrecision: 5, //指定`px`轉化成視窗單位值的小數位數（很多時候不能整除） viewportUnit: 'vw', //指定需要轉換的視窗單位 建議'vw' selectorBlackList: ['ignore'], //指定不需要轉換的類 exclude: [/TabBar/], //指定不要轉換的文件，數組內應該是正則表達式 minPixelVaule: 1, //小于或者等于1px不轉換為視窗單位 mediaQuery: flase , //允許在媒體查詢中轉換'px' landscape: false, // 是否添加根據landscapeWidth生成的媒體查詢條件 @media (orientation: landscape) landscapeUnit: "vw", // 橫屏時使用的視窗單位 landscapeWidth: 1134 // 橫屏時使用的視窗寬度 } } }
