PC端数据可视化看板rem适配不同屏幕分辨率

该布局可实现效果：

1. 浏览器窗口缩放，页面所有元素会自动跟随缩放（注意：chrome浏览器默认最小字体尺寸为12px，所以字体缩小到12px后将不再缩小）。
2. 无滚动条，浏览器窗口大小和比例的改变都不会出现滚动条。

实现步骤：

1. 使用rem布局。首先引入flexible.js，如果是vue项目可以使用npm下载。

2. 修改flexible.js中对屏幕分数的划分，这里设置为24份。（份数并不固定，这里是默认按1920px宽的分辨率进行设定）。

3. 默认屏幕宽为1920px，屏幕分成24份，那么每份尺寸为 1920 / 24 = 80px。也就是 1rem = 80px。

4. 下载Vscode插件：px to rem。该插件可以把选中的代码中，所有px单位的值转换成rem单位。鼠标选中后，按快捷键 alt+z

5. 在px to rem插件的扩展设置中，把1rem单位设置为80

6. 设置页面body样式，body的高度为100vh，即浏览器窗口高度的100%。这样body的子元素高度之和，不超过100%就不会出现滚动条，并且当浏览器窗口高度变化时仍然会撑满整个窗口。body的背景图片尺寸backound-size：100% 100%；这样当屏幕比例发生变化时背景图片会保持撑满窗口

7. 如图，body的子元素header和main，高度分别为8%、92%

8. main的子元素高度之和仍然不能超过100%，这里的100%指的是main的高度。

9. 注意：需要加padding和描边时，需要把容器转换为box-sizing：boder-box。否则内边距和描边的高度肯能会使子元素的高度之和超出父元素高度。

10. echarts图表想要实现自适应缩放需要在设置完setOption后加入该段代码：

window.addEventListener("resize", function() {
    myChart.resize();
  });