Vue2.0實現自適應解析度

阿新 • • 發佈：2021-11-28

本文例項為大家分享了2.0實現自適應解析度的具體程式碼，供大家參考，具體內容如下

1. 前臺框架：Vue2.0+elementUI 2.15.7

2. 開發工具：vs code

3. 安裝所需架包：

"post-import": "12.0.1",
"postcss-loader": "4.0.1YXNzw",
"postcss-pxtorem": "^5.1.1",

檢查是否安裝“flexible”架包，安裝了需解除安裝或者取消引用，該架包檔案會和修改過的“flexible”檔案衝突。

4. 建立flexibleEx.檔案（該檔案是修改flexible架包的flexible.js檔案，可以根據需求自行修改），放置在所需要的隨意位置，如：“/src/utils”目錄下面。

然後將“flexibleEx.js”引入到“main.js”中，如：

import '@/utils/flexibleEx.js'

檔案程式碼：

(function(win,lib) {
  var doc = win.document
  var docEl = doc.documentElement
  var metaEl = doc.querySelector('meta[name="viewport"]')
  var flexibleEl = doc.querySelector('meta[name="flexible"]')
  var dpr = 0
  var scale = 0
  var tid
  var flexible = lib.flexible |www.cppcns.com 
| (lib.flexible = {})
 
  if (metaEl) {
    console.warn('將根據已有的meta標籤來設定縮放比例')
    var match = metaEl
      .getAttribute('content')
      .match(/initial\-scale=([\d\.]+)/)
    if (match) {
      scale = parseFloat(match[1])
      dpr = parseInt(1 / scale)
    }
  } else if (flexibleEl) {
    var content = flexibleEl.getAttribute('content')
    if (content) {
      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/)
      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/)
      if (initialDpr) {
        dpr = parseFloat(initialDpr[1])
        scale = parseFloat((1 / dpr).toFixed(2))
      }
      if (maximumDpr) {
        dpr = parseFloat(maximumDpr[1])
        scale = parseFloat((1 / dpr).toFixed(2))
      }
    }
  }
 
  if (!dpr && !scale) {
    var is = win.navigator.appVersion.match(/android/gi)
    var isIPhone = win.navigator.appVersion.match(/iphone/gi)
    var devicePixelRatio = win.devicePixelRatio
    if (isIPhone) {
      // iOS下，對於2和3的屏，用2倍的方案，其餘的用1倍方案
      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
        dpr = 3
      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
        dpr = 2
      } else {
        dpr = 1
      }
    } else {
      // 其他裝置下，仍舊使用1倍的方案
      dpr = 1
    }
    scale = 1 / dpr
  }
 
  docEl.setAttribute('data-dpr',dpr)
  if (!metaEl) {
    metaEl = doc.createElement('meta')
    metaEl.setAttribute('name','viewport')
    metaEl.setAttribute(
      'content','initial-scale=' +
            scale +
            ',maximum-scale=' +
            scale +
            ',minimum-scale=' +
            scale +
            ',user-scalable=no'
    )
    if (docEl.firstElementChild) {
      docEl.firstElementChild.appendChild(metaEl)
    } else {
      var wrap = doc.createElement('div')
      wrap.appendChild(metaEl)
      doc.write(wrap.innerHTML)
    }
  }
 
  function refreshRem() {
    const whiteList = [
      '/managementKanban','/productionKanban','/controlBoard','/main'
    ] // 不重定向白名單路由
    var width = docEl.getBoundingClientRect().width
    var rem = 0
 
    var hrefList = window.location.href.split('/')
    var url = hrefList[hrefList.length - 1]
    var url0 = url.split('?')
    var urlEnd
    if (url0.length > 0) {
      urlEnd = url0[0]
    }
    if (!whiteList.includes('/' + urlEnd)) {
      if (width / dpr <= 1980 && width / dpr > 768) {
        width = 1980 * dpr
        rem = width / 48
      } else if (width / dpr >= 5760) {
        width = 5760 * dpr
        rem = width / 48
      } else {
        width = 540 * dpr
        rem = width / 20
      }
      docEl.style.fontSize = rem + 'px'
      flexible.rem = win.rem = rem
    }
  }
 
  win.addEventListener(
    'resize',function() {
      clearTimeout(tid)
      tid = setTimeout(refreshRem,300)
    },false
  )
  win.addEventListener(
    'DOMNodeInserted',50)
    },false
  )
  win.addEventListener(
    'pageshow',function(e) {
      if (e.persisted) {
        clearTimeout(tid)
        tid = setTimeout(refreshRem,300)
      }
    },false
  )
 
  if (doc.readyState === 'complete') {
    doc.body.style.fontSize = 12 * dpr + 'px'
  } else {
    doc.addEventListener(
      'DOMContentLoaded',function(e) {
        doc.body.style.fontSize = 12 * dpr + 'px'
      },false
    )
  }
 
  refreshRem()
 
  flexible.dpr = win.dpr = dpr
  flexible.refreshRem = refreshRem
  flexible.rem2px = functio 
n(d) {
    var val = parseFloat(d) * this.rem
    if (typeof d === 'string' && d.match(/rem$/)) {
      val += 'px'
    }
    return val
  }
  flexible.px2rem = function(d) {
    var val = parseFloat(d) / this.rem
    if (typeof d === 'string' && d.match(/px$/)) {
      val += 'rem'
    }
    return val
  }
})(window,window['lib'] || (window['lib'] = {}))

5. 修改“build/utitls.js”檔案，新增程式碼：

function generateLoaders(loader,loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader] : [cssLoader];
 
    if (loader) {
      loaders.push({
        loader: loader + "-loader",options: Object.assign({},loaderOptions,{
          sourceMap: options.sourceMap
        })
      });
    }
 
    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,fallback: "vue-style-loader",publicPath: "../../"
      });
    } else {
      return ["vue-style-loader"].concat(loaders);
    }
  }

6. 修改更目錄下面“postcssrc.js”

module.exports = {
    plugins: {
        'autoprefixer': {
            overrideBrowserslist: [
                'Android 4.1','iOS 7.1','Chrome > 31','ff > 31','ie >= 8'
            ]
        },'postcss-pxtorem': {
            rootValue: 37.5,propList: ['*']
        }
    }
}

7. 注：介面自適應問題已經解決，但是介面呈現還會出現一些問題，現在需要自行修改異常介面，介面開發儘量使用rem，樣式儘量不要使用內聯樣式，這些都需要手動修改

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。