这篇文章主要讲解了“Vue2.0如何实现自适应分辨率”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“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,样式尽量不要使用内联样式,这些都需要手动修改
感谢各位的阅读,以上就是“Vue2.0如何实现自适应分辨率”的内容了,经过本文的学习后,相信大家对Vue2.0如何实现自适应分辨率这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。