Vue 大屏项目中大屏解决方案---rem

rem 概念

rem（font size of the root element）是指相对于根元素（html）的字体大小的单位

html {
	font-size: 100px;
}
.div1{
	width: 1rem; // 1*100 = 100px  实际是100px
}

从上面可以看出现在将html的font-size 设置为 50px,那么div1的宽度就变成1乘以50 等于 5px,根元素字体大小缩小一半，div1的宽度也同样缩小一半，根据这个特性我们可以通过resize 事件去动态的线性的修改html的fontSize，那么界面上的元素就可以同比增加和缩小

大屏项目中应用

pubic html 入口页面中引入rem.js

rem.js

	尺寸	html的font-size
设计稿尺寸	1920	100
真实屏幕尺寸	clientWidth	100/(1920/clientWidth)

<script>
      (function () {
        // 页面一加载就要知道页面宽度计算
        var setFont = function () {
          // 因为要定义变量可能和别的变量相互冲突，污染，所有用自调用函数
          var html = document.documentElement; // 获取html
          // 宽高比
          const widthToHeight = 1920 / 1080;
          // 获取宽度
          var width = html.clientWidth;
          // 计算高度
          const height = width / widthToHeight;
          //设置body的高度 
          // document.getElementsByTagName("body")[0].style.height = height + "px";
          // document.getElementsByTagName("body")[0].style.border = '2px solid';
        
          // 设计稿1920   设计稿对应的HTML fontsize 100

          const rate = 1920/100 

          // 设置html的基准值
          var fontSize = width / rate + "px";

          // 根据当当前屏幕宽度动态修改html 根元素的fontsize
          html.style.fontSize = fontSize;
        };
        setFont();
        // 2、页面改变的时候也需要设置
        // 尺寸改变事件
        window.addEventListener("resize",function () {
          setFont();
        });
      })();
    </script>

然后在页面中使用rem单位 就可以实现在不同屏幕分辨率等比缩放，当我们在使用echarts的一些图表的时候不能直接写rem 单位，echarts是只认识px为单位的，需要我们写个函数将rem转换成px

// 获取到当前分辨率下的html 的font-size 然后通过 fontSize * rem = px
export const remToPx = (rem) => {
  const docEl = document.documentElement;
  const clientWidth = window.innerWidth
      || document.documentElement.clientWidth
      || document.body.clientWidth;
  if (!clientWidth) return;
  const fontSize = 100 * (clientWidth / 1920);
  return rem * fontSize;
};

我这里设置的100 是为了在写代码的时候好计算，你可以设置其他值，可以借助vscode工具帮我们计算

设置



按enter 自动帮我们转成rem