快捷導(dǎo)航

教你一招解決vue頁(yè)面自適應(yīng)布局

更新時(shí)間：2022年07月13日 11:03:03 作者：小靈兒吶

在前端開(kāi)發(fā)的時(shí)候經(jīng)常會(huì)遇到這樣的困惑,設(shè)計(jì)師給你的設(shè)計(jì)稿的尺寸和頁(yè)面的尺寸不一致,導(dǎo)致了頁(yè)面無(wú)法正常顯示,下面這篇文章主要給大家介紹了關(guān)于一招解決vue頁(yè)面自適應(yīng)布局的相關(guān)資料,需要的朋友可以參考下

安裝依賴(lài)

npm install postcss-px-to-viewport --save-dev

vue.config.js 常規(guī)配置

module.exports = {

//module.exports暴露的最外層添加以下代碼

  css: {
    requireModuleExtension: true,
    sourceMap: true,
    // 全局樣式
    loaderOptions: {
      postcss: {
        plugins: [
            require('postcss-px-to-viewport')({
                unitToConvert: 'px', // 需要轉(zhuǎn)換的單位，默認(rèn)為"px"
                viewportWidth: 1920, // 視窗的寬度，對(duì)應(yīng)pc設(shè)計(jì)稿的寬度，一般是1920
                viewportHeight: 1080, // 視窗的高度，對(duì)應(yīng)的是我們?cè)O(shè)計(jì)稿的高度,我做的是大屏監(jiān)控,高度就是1080
                unitPrecision: 6, // 單位轉(zhuǎn)換后保留的精度
                propList: [
                    // 能轉(zhuǎn)化為vw的屬性列表
                    '*',
                    // '!font-size',
                ],
                viewportUnit: 'vw', // 希望使用的視口單位
                fontViewportUnit: 'vw', // 字體使用的視口單位
                selectorBlackList: [], // 需要忽略的CSS選擇器，不會(huì)轉(zhuǎn)為視口單位，使用原有的px等單位。
                minPixelValue: 1, // 設(shè)置最小的轉(zhuǎn)換數(shù)值，如果為1的話，只有大于1的值會(huì)被轉(zhuǎn)換
                mediaQuery: false, // 媒體查詢(xún)里的單位是否需要轉(zhuǎn)換單位
                replace: true, // 是否直接更換屬性值，而不添加備用屬性
                exclude: [/(\/|\\)(node_modules)(\/|\\)/, /\components\/reportDetaillList\/toll_administration\/sf-report.vue/], // 忽略某些文件夾下的文件或特定文件，例如 'node_modules' 下的文件
            }),
        ],
    },
    }
  }
}

可配置項(xiàng)參數(shù)

unitToConvert (String) 需要轉(zhuǎn)換的單位，默認(rèn)為"px"
viewportWidth (Number) 設(shè)計(jì)稿的視口寬度
unitPrecision (Number) 單位轉(zhuǎn)換后保留的精度
propList (Array) 能轉(zhuǎn)化為vw的屬性列表
- 傳入特定的CSS屬性；
- 可以傳入通配符""去匹配所有屬性，例如：['']；
- 在屬性的前或后添加"*",可以匹配特定的屬性. (例如['position'] 會(huì)匹配 background-position-y)
- 在特定屬性前加 "!"，將不轉(zhuǎn)換該屬性的單位 . 例如: ['*', '!letter-spacing']，將不轉(zhuǎn)換letter-spacing
- "!" 和 ""可以組合使用，例如: ['', '!font*']，將不轉(zhuǎn)換font-size以及font-weight等屬性
viewportUnit (String) 希望使用的視口單位
fontViewportUnit (String) 字體使用的視口單位
selectorBlackList (Array) 需要忽略的CSS選擇器，不會(huì)轉(zhuǎn)為視口單位，使用原有的px等單位。
- 如果傳入的值為字符串的話，只要選擇器中含有傳入值就會(huì)被匹配
  例如 selectorBlackList 為 ['body'] 的話，那么 .body-class 就會(huì)被忽略
- 如果傳入的值為正則表達(dá)式的話，那么就會(huì)依據(jù)CSS選擇器是否匹配該正則
  例如 selectorBlackList 為 [/^body$/] , 那么 body 會(huì)被忽略，而 .body 不會(huì)
minPixelValue (Number) 設(shè)置最小的轉(zhuǎn)換數(shù)值，如果為1的話，只有大于1的值會(huì)被轉(zhuǎn)換
mediaQuery (Boolean) 媒體查詢(xún)里的單位是否需要轉(zhuǎn)換單位
replace (Boolean) 是否直接更換屬性值，而不添加備用屬性
exclude (Array or Regexp) 忽略某些文件夾下的文件或特定文件，例如 'node_modules' 下的文件
- 如果值是一個(gè)正則表達(dá)式，那么匹配這個(gè)正則的文件會(huì)被忽略
- 如果傳入的值是一個(gè)數(shù)組，那么數(shù)組里的值必須為正則
include (Array or Regexp) 如果設(shè)置了include，那將只有匹配到的文件才會(huì)被轉(zhuǎn)換，例如只轉(zhuǎn)換 'src/mobile' 下的文件 (include: /\/src\/mobile\//)
- 如果值是一個(gè)正則表達(dá)式，將包含匹配的文件，否則將排除該文件
- 如果傳入的值是一個(gè)數(shù)組，那么數(shù)組里的值必須為正則
landscape (Boolean) 是否添加根據(jù) landscapeWidth 生成的媒體查詢(xún)條件 @media (orientation: landscape)
landscapeUnit (String) 橫屏?xí)r使用的單位
landscapeWidth (Number) 橫屏?xí)r使用的視口寬度