大屏rem

某些项目中会有大屏展示功能，这一页面往往都是需要投放到大型显示器上的，因此需要自适应电脑屏幕，这里我们想到了使用rem单位。虽然有现成的插件可以把px转换成rem，但是我们只想要在大屏进行自适应处理，而其他页面使用px单位，因此我们可以使用以下方法来实现：

1.新建rem.js文件

//设置基础字号
const baseSize = 16
//设置基本缩放比
let scaleRate = 1;
// 设置 rem 函数
function setRem () {
 // 当前页面宽度相对于 1920 宽的缩放比例，可根据自己需要修改。
 const scale = document.documentElement.clientWidth / 1920
 scaleRate = scale
 // 设置页面根节点字体大小
 document.documentElement.style.fontSize = (baseSize * scale) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
 setRem()
}
export default scaleRate

2.在main.js文件里引入rem.js文件：

import './utils/rem'    //这里的路径可以根据自己文件位置自行修改

通过这两步就可以在大屏页面使用rem单位进行自适应屏幕的处理了；

scaleRate变量说明：

因为大屏页面好多都需要展示echart图，但是echart图里边使用的都是绝对单位px,所以定义了该变量并暴露。在大屏页面进行引入后，在echart图配置里需要的地方对其数值进行乘算。（tip:如果要保留最小字号，就加个判断，缩放值大于1的时候才进行乘算）