Vue2.0实现⾃适应分辨率
本⽂实例为⼤家分享了Vue2.0实现⾃适应分辨率的具体代码，供⼤家参考，具体内容如下
1. 前台框架：Vue
2.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 = Attribute('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 = ateElement('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 = ateElement('div')
wrap.appendChild(metaEl)
doc.write(wrap.innerHTML)
}
}
function refreshRem() {
const whiteList = [
'/managementKanban',
'/productionKanban',
'/controlBoard',
'/main'
] // 不重定向⽩名单路由
var width = BoundingClientRect().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'
< = = 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 (adyState === 'complete') {
doc.body.style.fontSize = 12 * dpr + 'px'
} else {
doc.addEventListener(
'DOMContentLoaded',
function(e) {
doc.body.style.fontSize = 12 * dpr + 'px'
},
false
)
}js assign
refreshRem()
flexible.dpr = win.dpr = dpr
<2px = function(d) {
var val = parseFloat(d) *
if (typeof d === 'string' && d.match(/rem$/)) {
val += 'px'
}
return val
}
flexible.px2rem = function(d) {
var val = parseFloat(d) /
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 (act) {
act({
use: loaders,
fallback: "vue-style-loader",
publicPath: "../../"
});
} else {
return ["vue-style-loader"].concat(loaders);
}
}
6. 修改更⽬录下⾯“postcssrc.js”
plugins: {
'autoprefixer': {
overrideBrowserslist: [
'Android 4.1',
'iOS 7.1',
'Chrome > 31',
'ff > 31',
'ie >= 8'
]
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
7. 注：界⾯⾃适应问题已经解决，但是界⾯呈现还会出现⼀些问题，现在需要⾃⾏修改异常界⾯，界⾯开发尽量使⽤rem，样式尽量不要使⽤内联样式，这些都需要⼿动修改
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。