由于项目中使用到大屏开发,做了一些大屏适配,特此记录,方便后续查找,本次使用的适配方案为rem
思路:rem是相对单位,是以页面根节点(html)字体为基准,vw/vh则为视口相对单位
1.创建rem.ts文件,用来动态计算页面变化后的字体,这里是以1920的屏幕为基础屏,在其基础上进行缩放
rem.ts
// 根据屏幕宽度动态计算根字体大小
const baseSize = 16
export function setRem() {
const scale = document.documentElement.clientWidth / 1920
document.documentElement.style.fontSize = `${baseSize * Math.min(scale, 2)}px`
}
export function resetRem() {
document.documentElement.style.fontSize = '16px'
}
2.界面使用,再进入界面是,绑定页面变化监听事件,监听页面变化时动态计算字体大小,在离开页面时重新设置为标准字体:16px(为了防止影响非大屏页面的字体),如果没有其它页面,也可以将其在main.ts全局引入
bigScreen.vue
onMounted(() => {
setRem()
window.addEventListener('resize', setRem)
})
onBeforeUnmount(() => {
window.removeEventListener('resize', setRem)
resetRem()
})