詳解Vue如何實現(xiàn)響應式布局

更新時間：2023年12月28日 11:20:42 作者：流氓也是種氣質(zhì)?_Cookie

這篇文章主要為大家詳細介紹了Vue實現(xiàn)響應式布局的兩種方法,文中的示例代碼講解詳細,具有一定的學習價值,感興趣的小伙伴可以跟隨小編一起了解一下

方法一：百分比

用百分比去寫元素的寬度，然后讓子元素撐起父元素的高度

.parent {
    width: 50%;
}
 
.child {
    width:100%;
    height:100px;
}

方法二：vh、vw

vw、vh是基于視口的布局方案，所以這個meta元素的視口必須聲明。（解決寬高自動適配）

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

.box{
        width:50vw;
        height: 20vh;
        line-height: 20vh;
        font-size: 1.5rem;
        background-color: yellow;
    }

50vw的意思是占視口寬度的一半，20vh占視口高度的20%，隨著視口的變化自適應。

在所需頁面中選擇合適的方法，然后開始進行下面的配置

開始配置（不使用媒體查詢）

使用postcss-px2rem----修改單位（包括第三方組件）

幫我們自動將px單位轉(zhuǎn)換成rem單位（主要是轉(zhuǎn)換不是我們自己寫的頁面尺寸，比如elementUI中的尺寸就會改變，除了行內(nèi)）

注意：UI框架部分組件使用JavaScript將css作為內(nèi)聯(lián)樣式直接寫在html標簽內(nèi)，打包適配時不會讀取相關css,所以要配置相關樣式，在style中需要" !important "進行樣式覆蓋。

使用postcss-px2rem-exclude---修改單位（不包括第三方組件）

幫我們自動將px單位轉(zhuǎn)換成rem單位（此插件的功能是為了排除 node_modules 中的所有第三方插件，所以第三方組件庫的樣式就不會被受到影響。比如elementUI就不會轉(zhuǎn)換單位了）

我們使用postcss-plugin-px2rem-----指定某一文件下所以css文件不進行單位轉(zhuǎn)換（推薦）

第一步：npm下載插件

幫我們自動將px單位轉(zhuǎn)換成rem單位（配置是否對某個文件夾下的所有css文件不進行從px到rem的轉(zhuǎn)換）

npm i postcss-plugin-px2rem

第二步：配置vue.config.js

devserve:{},
css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            require('postcss-plugin-px2rem')({
              rootValue: 80, //換算基數(shù)， 默認100  ，這樣的話把根標簽的字體規(guī)定為1rem為50px,這樣就可以從設計稿上量出多少個px直接在代碼中寫多上px了。
              // unitPrecision: 5, //允許REM單位增長到的十進制數(shù)字。
              //propWhiteList: [],  //默認值是一個空數(shù)組，這意味著禁用白名單并啟用所有屬性。
              // propBlackList: [], //黑名單
              exclude: /(node_module)/,  //默認false，可以（reg）利用正則表達式排除某些文件夾的方法，例如/(node_module)/ 。如果想把前端UI框架內(nèi)的px也轉(zhuǎn)換成rem，請把此屬性設為默認值
              // selectorBlackList: [], //要忽略并保留為px的選擇器
              // ignoreIdentifier: false,  //（boolean/string）忽略單個屬性的方法，啟用ignoreidentifier后，replace將自動設置為true。
              // replace: true, // （布爾值）替換包含REM的規(guī)則，而不是添加回退。
              mediaQuery: false,  //（布爾值）允許在媒體查詢中轉(zhuǎn)換px。
              minPixelValue: 3 //設置要替換的最小像素值(3px會被轉(zhuǎn)rem)。 默認 0
            })
          ]
        }
 
      }
    }
  },

第三步：屏幕自適應

使用flexible.js+vscode的插件cssrem----屏幕自適應大小

第一步，在src中新建util目錄下新建flexible.js（原版是分成10等分，這里我分成了24等分）

(function flexible(window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1
 
  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();
 
  // set 1rem = viewWidth / 10 原版是10等分，這里把屏幕平均劃分為24等分 1920
  function setRemUnit() {
    var rem = docEl.clientWidth / 24
    docEl.style.fontSize = rem + 'px'
  }
 
  setRemUnit()
 
  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })
 
  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

最后，在main.js中引入文件； import '../flexible' //自適應

第四步，再配合cssrem插件使用進行伸縮適配

因為是按照1920設計稿寫的，而且我把flexible修改了24等分，所以1920/24=80，這里的基準改為80。你們可以按照自己的要求來寫。

第五步設計稿上是多少px 代碼里寫多少px 即可

.cus_tbox {
  width: 100%;
  height: 394px;
  border: 1px solid red;
  margin-bottom: 16px;
}
.cus_bbox {
  width: 100%;
  height: 563px;
  border: 1px solid yellow;
}

以上就是詳解Vue如何實現(xiàn)響應式布局的詳細內(nèi)容，更多關于Vue響應式布局的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: