vue大屏适配方案记录

由于项目中使用到大屏开发，做了一些大屏适配，特此记录，方便后续查找，本次使用的适配方案为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()
})