vue-cli3.0 postcss-px-to-viewport將px轉化為vwvh適配/Web 端螢幕適配方案
阿新 • • 發佈:2021-12-07
postcss-px-to-viewport
postcss-px-to-viewport,可以將px單位自動轉換成viewport單位(vw表示螢幕的1%)。
npm install postcss-px-to-viewport --save-dev 或者使用yarn安裝 yarn add postcss-px-to-viewport -D //可能會報錯。就是用npm
因為是vue-cli3.0所以找到專案根目錄下新建vue.config.js配置檔案,在該檔案中寫入如下內容
module.exports = { devServer: { port: 8080, disableHostCheck:true, }, css: { loaderOptions: { postcss: { plugins: [ require("postcss-px-to-viewport")({ unitToConvert: "px",// 要轉化的單位 viewportWidth: 1920,// UI設計稿的寬度 unitPrecision: 5,// 轉換後的精度,即小數點位數 propList: [ "*" ],// 指定轉換的css屬性的單位,*代表全部css屬性的單位都進行轉換 viewportUnit: "vw",// 指定需要轉換成的視窗單位,預設vw fontViewportUnit: "vw",// 指定字型需要轉換成的視窗單位,預設vw // landscapeUnit: 'vh',// 橫屏時使用的單位 // landscapeWidth: 667,// 橫屏時使用的視口寬度 selectorBlackList: [],// 指定不轉換為視窗單位的類名 minPixelValue: 1,//預設值1,小於或等於1px則不進行轉換 mediaQuery: false,// 是否在媒體查詢的css程式碼中也進行轉換,預設false replace: true,// 是否轉換後直接更換屬性值 // landscape: false, // 是否處理橫屏情況 exclude: /(\/|\\)(node_modules)(\/|\\)/, // 設定忽略檔案,用正則做目錄名匹配 }) ] } } } }
切記不能寫style行內樣式不會生效.
vue-cli2: 在更目錄下新建.postcssrc.js
module.exports = { "plugins": { // "postcss-import": {},s "postcss-url": {}, // to edit target browsers: use "browserslist" field in package.json // "autoprefixer": {}, "autoprefixer": { path: ['./src/*'] }, "postcss-import": {}, "postcss-px-to-viewport": { "viewportWidth": "1920", // 視窗的寬度,對應的是我們設計稿的寬度 "viewportHeight": "1080", // 視窗的高度 "unitPrecision": 2, //指定`px`轉換為視窗單位值的小數位數(很多時候無法整除) "viewportUnit": "vw", //指定需要轉換成的視窗單位,建議使用vw "selectorBlackList": [], //指定不轉換為視窗單位的類 "minPixelValue": 1, // 小於或等於`1px`不轉換為視窗單位 "mediaQuery": false, // 允許在媒體查詢中轉換`px` // "exclude": [/(\/|\\)(dataExpress)(\/|\\)/, /(\/|\\)(css)(\/|\\)/] // "exclude": /(\/|\\)(dataExpress)(\/|\\)/ }, } }
然後重啟專案,實現
使用vwvh
- 優點:rem ,使用 vw 和 wh 是非常直觀的,讓其他人看到就能知道,該介面是以怎麼樣的結構進行佈局,利於維護
- 缺點:vw 在一些三星的機子會有相容問題,導致失效,以及不同瀏覽器相容問題