本文实例为大家分享了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”中，如：
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 || (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) {
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',
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，样式尽量不要使用内联样式，这些都需要手动修改
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
