大屏展示用rem做响应式

很多朋友都知道可以用rem做大屏全局适配，但是没有实操过，今天我就记录下全部步骤

1. 我的设计图的宽度是5632的，所以开发的时候我们为了方便rem换算，可以在mounted设置根节点为10px，然后我们根据设计图的尺寸都除以10就是rem，举个例子设计图上如果尺寸是20px，我们就要写2rem

document.documentElement.style.fontSize =  "10px"

2. 开发完成页面后根据宽度动态修改根节点的单位

mounted() {
		this.refreshView()
		let resizeTimer = null
		window.addEventListener("resize", () => {
		// 窗口滚动监听
            if (resizeTimer) {
                clearTimeout(resizeTimer)
            }
            resizeTimer = setTimeout(() => {
                this.refreshView()
            }, 100)
        })
	},
	methods: {
		refreshView() {
			// 获取当前屏幕的宽度
            const div = document.querySelector(".screen-bg")
            const width = div.offsetWidth
            // 5632是设计图的尺寸
            document.documentElement.style.fontSize =
                (10 * width) / 5632  + "px"
        },
        },
    destroyed() {
		document.documentElement.style.fontSize = "12px"
	},

3. 如果涉及到echars绘图，字号不变的问题，我写了个公共方法动态根据当前的rem，换算成对应的字号

		// 传入rem数字换算成对应的字号
		filterSize(num) {
			// 过滤字体大小
			let docSize = parseFloat(document.documentElement.style.fontSize)
			return num * docSize
		},