mounted直接调用就行,当前宽度大于1920使用宽度比,小于使用高度
suofang() {
(function (doc, win) {
const uiWidth = 1920 // 设计稿宽度
const uiHeight = 1080
const docEl = doc.documentElement
// 检测屏幕翻转
const resizeEvt =
'orientationchange' in window ? 'orientationchange' : 'resize'
const recalc = function () {
// clientWidth = width+左右padding
let clientWidth = docEl.clientWidth
const clientHeight = docEl.clientHeight
if (!clientWidth) {
return
}
if (clientWidth >= uiWidth) {
clientWidth = uiWidth
docEl.style.fontSize = 1 * (clientWidth / uiWidth) + 'px'
} else {
clientWidth = clientHeight
docEl.style.fontSize = 1 * (clientWidth / uiHeight) + 'px'
}
// 全部宽度 / 设计稿宽度 赋值html
}
if (!doc.addEventListener) {
return
}
// 注册事件-不冒泡
win.addEventListener(resizeEvt, recalc, false)
// 脚本解析完毕,html未解析完触发-不冒泡
doc.addEventListener('DOMContentLoaded', recalc, false)
recalc()
})(document, window)
},
作者:拜无忧
链接:https://juejin.cn/post/7051788746726834184
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。