大屏中各种元素以及echarts图表如何做到完全自适应

        对于大屏，主要用于对外展示数据。

        可能会投放在各种分辨率的显示器上面，对于前端最重要的是自适应的处理。

        自适应包含字体、图表、图片等的自适应。

---

        常见的布局有：

一、rem布局: 字体和宽高等长度都可以使用的单位

        默认情况下，html元素的font-size为12px。

        可以按照设计稿给的尺寸大小，设置一个方便计算的font-size，其他的元素的尺寸按照rem来给。

        对于设计稿之外的其他尺寸的分辨率，我们加一段js代码，自动去按照比例去更改根元素font-size的值，然后在监听浏览器的resize，去调用这段js代码，动态设置font-size，实现响应。

        缺点：css样式和js代码有一定的耦合性。且必须将改变font-size的代码放在css样式之前。

二、百分比布局

        宽高设置百分比，可以使得浏览器发生变化时，得到响应式效果。

        百分比布局相对的大小标准不唯一，需要了解以下几点：

        1、width和height是相对于直接父元素的width和height；

        2、top,bottom是相对于直接非static父元素的height；

        3、left,right是相对于直接非static父元素的width；

        4、padding,margin无论是垂直还是水平方向都是相对于直接父元素的width，与height无关；

        5、border-radius, translate、background-size都是相对于自身；

        缺点：要自己换算，换算不唯一。

三、px结合多媒体查询

        使用@media媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，编写多套样式，从而达到自适应效果。

            缺点：如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐

四、vm布局（vw wh vmin wmax）

        css3新特性,与百分比布局不同，它是相对于视口大小的更理想的百分比单位，1vw是视口宽度的1/100。

        viewport 就是浏览器视口，浏览器视口和浏览器窗口类似，只不过不包括水平滚动条和垂直滚动条。如果网页里没有滚动条，则浏览器视口和浏览器窗口的大小一样。

        假如视口宽度为1920px,那么1px=100/1920vw。自己计算比较麻烦，可以使用插件，将px转化为vw。

        缺点：自己计算会比较麻烦，ie11不支持该属性。

五、flex布局

        弹性盒子布局，为盒模型提供最大的灵活性。

        在实际项目中，我经常选用的是，rem布局，或者vw+百分比，同时结合flex等进行灵活使用。

对于第三方工具自适应的处理，比如echarts图表

        对于大屏，其实经常会使用到图表，我一般使用的是echarts。

        对于echarts,里面不能使用vw、rem这样的单位，只能使用px,因此echarts中涉及到尺寸的设置。

        在考虑到自适应的情况下，需要我们去写个方法，动态换算设值，同时在监听resize的时候，调用setOption。

注意在组件销毁的时候 要清空绑定的resize事件

如果帮助到你，点个赞鼓励下女程序员吧！