應用場景

頁面需要在pc端和移動端同時相容，以前我的方案都是使用媒體查詢來判斷當前裝置大小，然後寫兩套或者三套css程式碼來相容他們，能達到目的，並且效果不錯，但是感覺還是稍微麻煩了一丟丟。後面瞭解了一下flexable.js指令碼，稍作修改，基本可以滿足我的需求。

postcss-px2rem

yarn add postcss-px2rem

postcss-px2rem外掛可以將px轉為rem,需要在vue.config.js(專案沒有的話就手動建立一個)中配置外掛

// css相關配置
  css: {
    // 啟用 CSS modules
    modules: false,// 是否使用css分離外掛
    extract: true,// 開啟 CSS source maps?
    sourceMap: false,// css預設器配置項
    loaderOptions: {
      css: {},postcss: {
        plugins: [
          //remUnit這個配置項的數值是多少呢？？？ 通常我們是根據設計圖來定這個值，原因很簡單，便於開發。
          //假如設計圖給的寬度是750，我們通常就會把remUnit設定為75，這樣我們寫樣式時，可以直接按照設計圖標註的寬高來1:1還原開發。
          require('postcss-px2rem')({
            remUnit: 75
          })
        ]
      }
    },}

flexible.js

flexible會為頁面根據螢幕自動新增標籤，動態控制initial-scale，maximum-scale，minimum-scale等屬性的值 ===>裝置縮放比

所以，在我們的html的header中，就不要之前配置的viewport的meta標籤了

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

這種標籤flexble會自動幫我們加上。

下面附上修改完後的flexble指令碼程式碼：

(function flexible (window,document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1
  var isMobileDevice = /(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent);
  dpr = isMobileDevice ? dpr : 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
  function setRemUnit () {
    let width = docEl.clientWidth
    // 下面5行為自己加的程式碼，pc端頁面不轉rem
    let remUnitConfig = 75
    let viewWidthMax = remUnitConfig * 10
    if (width / dpr > viewWidthMax) {
      width = viewWidthMax * dpr
    }

    var rem = width / 10
    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))

最後需要在index.html中引入指令碼：
flexble.js要和index.html檔案同級

最後在head新增js標籤，引入它：

<script src="flexible.js" type="text/javascript" charset="utf-8"></script>

自此，專案就配置完了。

到此這篇關於vue cli3適配所有端方案的實現的文章就介紹到這了,更多相關vue cli3適配所有端內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！