设置字体随着浏览器的缩放而缩放
/**
* @description 设置字体大小
*/
fontSize(res) {
let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
if (!clientWidth) return
let fontSize = 100 * (clientWidth / 1920)
return res * fontSize
},
/**
* 根据屏幕大小设定font-size 适配rem
* 方法写在app.vue中 在 mounted 中调用
*/
setFontSize() {
const docEl = document.documentElement
let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
const scale = (1920 / 1080).toFixed(2)
const recalc = function () {
const clientWidth = docEl.clientWidth
const clientHeight = docEl.clientHeight
if (!clientHeight || !clientWidth) return
const scaleCilent = (clientWidth / clientHeight).toFixed(2)
let size = ''
if (scale > scaleCilent) {
size = 100 * (clientWidth / 1920)
} else {
size = 100 * (clientHeight / 1080)
}
docEl.style.fontSize = (size < 100 ? size : 100) + 'px'
}
if (!document.addEventListener) return
window.addEventListener(resizeEvt, recalc, false)
document.addEventListener('DOMContentLoaded', recalc, false)
},
},