Vue project large screen adaptation method

1. Adaptation mode

The adaptation scheme adopts REM layout, adjusts the font size of the root element HTML according to the different screen resolution, so that the width and height of each element can automatically change and adapt to different screens

2. Use the postCSS-px2REM-exclude plug-in

Install postcss-px2REm-exclude –save-dev

Create the postcss.config.js file in the project root directory

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px2rem-exclude': {
      remUnit: 192
      // exclude: /node_modules|folder_name/i,}}}Copy the code

3. Install flexible. Js (recommended to local)

Install command NPM install lib-flexible

(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 || (lib.flexible = {})

  if (metaEl) {
    console.warn('Scaling will be set based on existing meta tags')
    var match = metaEl
      .getAttribute('content')
      // eslint-disable-next-line no-useless-escape
      .match(/initial\-scale=([\d\.]+)/)
    if (match) {
      scale = parseFloat(match[1])
      dpr = parseInt(1 / scale)
    }
  } else if (flexibleEl) {
    var content = flexibleEl.getAttribute('content')
    if (content) {
      // eslint-disable-next-line no-useless-escape
      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/)
      // eslint-disable-next-line no-useless-escape
      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 isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi)
    var devicePixelRatio = win.devicePixelRatio
    if (isIPhone) {
      // On iOS, use 2x for 2 and 3 screens, and 1x for the rest
      if (devicePixelRatio >= 3&& (! dpr || dpr >=3)) {
        dpr = 3
      } else if (devicePixelRatio >= 2&& (! dpr || dpr >=2)) {
        dpr = 2
      } else {
        dpr = 1}}else {
      // For other devices, use the same 1 times scheme
      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() {
    var width = docEl.getBoundingClientRect().width
    if (width / dpr > 540) {
      width = width * dpr
    }
    var rem = width / 10
    docEl.style.fontSize = rem + 'px'
    flexible.rem = win.rem = rem
  }

  win.addEventListener(
    'resize'.function() {
      clearTimeout(tid)
      tid = setTimeout(refreshRem, 300)},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() {
        doc.body.style.fontSize = 12 * dpr + 'px'
      },
      false
    )
  }

  refreshRem()

  flexible.dpr = win.dpr = dpr
  flexible.refreshRem = refreshRem
  flexible.rem2px = function(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'] = {}))
Copy the code

The above code has been modified differently from the installed flexibility.js

  function refreshRem() {
    var width = docEl.getBoundingClientRect().width
    if (width / dpr > 540) {
      width = width * dpr
    }
    var rem = width / 10
    docEl.style.fontSize = rem + 'px'
    flexible.rem = win.rem = rem
  }
Copy the code

Introduced in main.js

Import 'path /flexible.js'