教你一招解決vue頁面自適應佈局
兼容vue2、vue3項目,將vue文件中style裡單位為px,編譯時自動轉換為vw、vh等單位
安裝依賴
npm install postcss-px-to-viewport --save-dev
vue.config.js 常規配置
module.exports = { //module.exports暴露的最外層添加以下代碼 css: { requireModuleExtension: true, sourceMap: true, // 全局樣式 loaderOptions: { postcss: { plugins: [ require('postcss-px-to-viewport')({ unitToConvert: 'px', // 需要轉換的單位,默認為"px" viewportWidth: 1920, // 視窗的寬度,對應pc設計稿的寬度,一般是1920 viewportHeight: 1080, // 視窗的高度,對應的是我們設計稿的高度,我做的是大屏監控,高度就是1080 unitPrecision: 6, // 單位轉換後保留的精度 propList: [ // 能轉化為vw的屬性列表 '*', // '!font-size', ], viewportUnit: 'vw', // 希望使用的視口單位 fontViewportUnit: 'vw', // 字體使用的視口單位 selectorBlackList: [], // 需要忽略的CSS選擇器,不會轉為視口單位,使用原有的px等單位。 minPixelValue: 1, // 設置最小的轉換數值,如果為1的話,隻有大於1的值會被轉換 mediaQuery: false, // 媒體查詢裡的單位是否需要轉換單位 replace: true, // 是否直接更換屬性值,而不添加備用屬性 exclude: [/(\/|\\)(node_modules)(\/|\\)/, /\components\/reportDetaillList\/toll_administration\/sf-report.vue/], // 忽略某些文件夾下的文件或特定文件,例如 'node_modules' 下的文件 }), ], }, } } }
可配置項參數
- unitToConvert (String) 需要轉換的單位,默認為"px"
- viewportWidth (Number) 設計稿的視口寬度
- unitPrecision (Number) 單位轉換後保留的精度
- propList (Array) 能轉化為vw的屬性列表
- 傳入特定的CSS屬性;
- 可以傳入通配符""去匹配所有屬性,例如:[''];
- 在屬性的前或後添加"*",可以匹配特定的屬性. (例如['position'] 會匹配 background-position-y)
- 在特定屬性前加 "!",將不轉換該屬性的單位 . 例如: ['*', '!letter-spacing'],將不轉換letter-spacing
- "!" 和 ""可以組合使用, 例如: ['', '!font*'],將不轉換font-size以及font-weight等屬性
- viewportUnit (String) 希望使用的視口單位
- fontViewportUnit (String) 字體使用的視口單位
- selectorBlackList (Array) 需要忽略的CSS選擇器,不會轉為視口單位,使用原有的px等單位。
- 如果傳入的值為字符串的話,隻要選擇器中含有傳入值就會被匹配
例如 selectorBlackList 為 ['body'] 的話, 那麼 .body-class 就會被忽略 - 如果傳入的值為正則表達式的話,那麼就會依據CSS選擇器是否匹配該正則
例如 selectorBlackList 為 [/^body$/] , 那麼 body 會被忽略,而 .body 不會
- 如果傳入的值為字符串的話,隻要選擇器中含有傳入值就會被匹配
- minPixelValue (Number) 設置最小的轉換數值,如果為1的話,隻有大於1的值會被轉換
- mediaQuery (Boolean) 媒體查詢裡的單位是否需要轉換單位
- replace (Boolean) 是否直接更換屬性值,而不添加備用屬性
- exclude (Array or Regexp) 忽略某些文件夾下的文件或特定文件,例如 'node_modules' 下的文件
- 如果值是一個正則表達式,那麼匹配這個正則的文件會被忽略
- 如果傳入的值是一個數組,那麼數組裡的值必須為正則
- include (Array or Regexp) 如果設置瞭include,那將隻有匹配到的文件才會被轉換,例如隻轉換 'src/mobile' 下的文件 (include: /\/src\/mobile\//)
- 如果值是一個正則表達式,將包含匹配的文件,否則將排除該文件
- 如果傳入的值是一個數組,那麼數組裡的值必須為正則
- landscape (Boolean) 是否添加根據 landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
- landscapeUnit (String) 橫屏時使用的單位
- landscapeWidth (Number) 橫屏時使用的視口寬度
重啟項目
註意:隻能改變<style lang="less" scoped></style>
裡單位,行內樣式style無法自適應轉換
總結
到此這篇關於解決vue頁面自適應佈局的文章就介紹到這瞭,更多相關vue頁面自適應佈局內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!