对于大屏，主要用于对外展示数据。
可能会投放在各种分辨率的显示器上面，对于前端最重要的是自适应的处理。
自适应包含字体、图表、图片等的自适应。
常见的布局有：
一、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事件
如果帮助到你，点个赞鼓励下女程序员吧！
