SoFunction
Updated on 2025-04-05

Vue2.0 achieves adaptive resolution

This article shares the specific code for Vue2.0 to implement adaptive resolution for your reference. The specific content is as follows

1. Front desk framework:Vue2.0+elementUI 2.15.7

2. Development tools:vs code

3. Install the required rack package:

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

Check whether the "flexible" rack package is installed. If it is installed, it needs to be uninstalled or dereferenced. The rack package file will conflict with the modified "flexible" file.

4. Create a file(This file is a file that modifies the flexible shelf package and can be modified by yourself according to your needs) and place it in any location you need, such as: under the "/src/utils" directory.

Then introduce "" into "", such as:

import '@/utils/'

File code:

(function(win, lib) {
  var doc = 
  var docEl = 
  var metaEl = ('meta[name="viewport"]')
  var flexibleEl = ('meta[name="flexible"]')
  var dpr = 0
  var scale = 0
  var tid
  var flexible =  || ( = {})
 
  if (metaEl) {
    ('The scaling ratio will be set according to the existing meta tag')
    var match = metaEl
      .getAttribute('content')
      .match(/initial\-scale=([\d\.]+)/)
    if (match) {
      scale = parseFloat(match[1])
      dpr = parseInt(1 / scale)
    }
  } else if (flexibleEl) {
    var content = ('content')
    if (content) {
      var initialDpr = (/initial\-dpr=([\d\.]+)/)
      var maximumDpr = (/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 = (/android/gi)
    var isIPhone = (/iphone/gi)
    var devicePixelRatio = 
    if (isIPhone) {
      // Under iOS, for screens 2 and 3, use a 2x solution, and the rest use a 1x solution.      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
        dpr = 3
      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
        dpr = 2
      } else {
        dpr = 1
      }
    } else {
      // Under other equipment, the 1x solution is still used      dpr = 1
    }
    scale = 1 / dpr
  }
 
  ('data-dpr', dpr)
  if (!metaEl) {
    metaEl = ('meta')
    ('name', 'viewport')
    (
      'content',
      'initial-scale=' +
            scale +
            ', maximum-scale=' +
            scale +
            ', minimum-scale=' +
            scale +
            ', user-scalable=no'
    )
    if () {
      (metaEl)
    } else {
      var wrap = ('div')
      (metaEl)
      ()
    }
  }
 
  function refreshRem() {
    const whiteList = [
      '/managementKanban',
      '/productionKanban',
      '/controlBoard',
      '/main'
    ] // Don't redirect whitelist routes    var width = ().width
    var rem = 0
 
    var hrefList = ('/')
    var url = hrefList[ - 1]
    var url0 = ('?')
    var urlEnd
    if ( > 0) {
      urlEnd = url0[0]
    }
    if (!('/' + 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
      }
       = rem + 'px'
       =  = rem
    }
  }
 
  (
    'resize',
    function() {
      clearTimeout(tid)
      tid = setTimeout(refreshRem, 300)
    },
    false
  )
  (
    'DOMNodeInserted',
    function() {
      clearTimeout(tid)
      tid = setTimeout(refreshRem, 50)
    },
    false
  )
  (
    'pageshow',
    function(e) {
      if () {
        clearTimeout(tid)
        tid = setTimeout(refreshRem, 300)
      }
    },
    false
  )
 
  if ( === 'complete') {
     = 12 * dpr + 'px'
  } else {
    (
      'DOMContentLoaded',
      function(e) {
         = 12 * dpr + 'px'
      },
      false
    )
  }
 
  refreshRem()
 
   =  = dpr
   = refreshRem
  flexible.rem2px = function(d) {
    var val = parseFloat(d) * 
    if (typeof d === 'string' && (/rem$/)) {
      val += 'px'
    }
    return val
  }
  flexible.px2rem = function(d) {
    var val = parseFloat(d) / 
    if (typeof d === 'string' && (/px$/)) {
      val += 'rem'
    }
    return val
  }
})(window, window['lib'] || (window['lib'] = {}))

5. Modify the "build/" file and add code:

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

6. Modify the "" below the directory

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

7. Note:The interface adaptation problem has been solved, but there are still some problems with the interface presentation. Now you need to modify the exception interface by yourself. Try to use rem as much as possible in the interface development, and try not to use inline styles. These all need to be manually modified.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.