Vue2.0实现自适应分辨率代码示例

时间：2022-06-29 02:02:44 编辑：袖梨来源：一聚教程网

本篇文章小编给大家分享一下Vue2.0实现自适应分辨率代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

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

2. 开发工具：vs code

3. 安装所需架包：

"postcss-import": "12.0.1",

"postcss-loader": "4.0.1",

"postcss-pxtorem": "^5.1.1",

检查是否安装“flexible”架包，安装了需卸载或者取消引用，该架包文件会和修改过的“flexible”文件冲突。

4. 创建flexibleEx.js文件（该文件是修改flexible架包的flexible.js文件，可以根据需求自行修改），放置在所需要的随意位置，如：“/src/utils”目录下面。

然后将“flexibleEx.js”引入到“main.js”中，如：

1	`import` `'@/utils/flexibleEx.js'`

文件代码：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

(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('将根据已有的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 isAndroid = 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) {
        * dpr
        rem = width / 48
      } else if (width / dpr >= 5760) {
        * dpr
        rem = width / 48
      } else {
        * 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',
    function() {
      clearTimeout(tid)
      tid = setTimeout(refreshRem, 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 = 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'] = {}))

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，样式尽量不要使用内联样式，这些都需要手动修改

推荐专题

最新下载

热门教程

Vue2.0实现自适应分辨率代码示例

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程