## 前言 [autofit.js](https://github.com/LarryZhu-dev/autofit.js) 发布马上要一年了，也收获了一批力挺用户，截至目前它在[github](https://github.com/LarryZhu-dev/autofit.js)上有1k 的 star，[npm](https://www.npmjs.com/package/autofit.js?activeTab=readme) 上有超过 13k 的下载量。这篇文章主要讲从设计稿到落地开发大屏应用，大道至简，这篇文章能帮助各位潇洒自如的开发大屏。 ## 分析设计稿分析设计稿之前先吐槽一下大屏这种展现形式，这简直就是自欺欺人、面子工程的最直接的诠释，是吊用没有，只为了好看，如果设计的再不好看啊，这就纯纯是屎。在我的理解中，这就像把PPT放到了web端，仅此而已。 > 但是王哥告诉我："你看似没有用的东西，其实都有用，很多想真正做出有用的产品的企业，没钱，就要先把面子工程做好，告诉别人他们要做一件什么事，这样投资人才会看到，后面才有机会发展。" ### 布局方案 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/21af7c2b9b6b49639381935bad5c7d40~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1246&h=654&s=21214&e=png&b=1f1f1f) 上图展示了一个传统意义上且比较普遍的大屏形态，分为四个部分，分别是 #### 头部头部经常放标题、功能菜单、时间、天气 #### 左右面板左右面板承载了各种数字和报表，还有视频、轮播图等等 #### 中间中间部分一般放地图，这其中又分假地图（一张图片）、图表地图（如echarts）、地图引擎（如：leaflet、mapbox、高德、百度）。或者有的还会放3D场景，一般有专门的同事去做3D场景，然后导入到web端。大屏的设计通常的分辨率是 1920*1080 的，这也是迄今为止应用最广泛的显示器配置，当然也有基于客户屏幕做的异形分辨率，这就五花八门了。但是万变不离其宗，分辨率的变化不会影响它的基本结构，根据上面的图，我们可以快速构建结构代码 ```

``` 上面的代码实现了最简单的上下(Box)+左右(body)的布局结构，完全不需要任何定位策略。要实现上图的效果，只需最简单的CSS即可完成布局。 ### 组件方案大屏虽然是屎，但是是一种可玩性很强的项目，想的越复杂，做起来就越复杂，想的越简单，做起来就越简单。可以疯狂封装炫技，因为大屏里面的可玩组件简直太多了，且涵盖的太全了，想怎么玩都可以，包括但不限于各类图表库的封装（echarts、highCharts、vChart）、轮播图（swiper）、地图引擎、视频库（包括直播流）等等。如果想简单，甚至可以不用封装，可以看到结构甚至简单到不用CSS几行就可以搭建出基本框架，只把header、leaftPanel、rightPanel、map封装一下就可以了。这里还有一个误区，就是大家都喜欢把大型的组件库拉到大屏里来用，结果做完了发现好像只用了一个 toast 和一个下拉组件，项目打包后却增大了几十倍的体积，其实像这种简单的组件，完全可以手写，或者找小的独立包来用，一方面会减小体积，不至于让项目臃肿，另一方面可以锻炼自己的手写能力，这才是有必要的封装。 ## 适配目前主流的适配方案，依然是 rem 方案，其原理就是根据根元素的 font-size 自动计算大小，但是此方法需要手动计算 rem 值，或者使用第三方插件如postcss等，但是此方案还有一个弊端，就是无法向下兼容，因为浏览器中最小的文字大小是12px。 vh/vw方案就不再赘述了，原理基本和 rem/em 相似，都涉及到单位的转换。 ### autofit.js 主要讲一下使用 autofit.js 如何快速实现适配。 #### 不支持的场景首先 autofit.js 不支持 elementUI(plus)、ant-design等组件库，具体是不支持包含popper.js的组件，popper.js 在计算弹出层位置时，不会考虑 scale 后的元素的视觉大小，所以会造成弹出元素的位置偏移。其次，不支持百度地图，百度地图对窗口缩放事件没有任何处理，有同学反馈说，即使使用了resize属性，百度地图在和autofit.js共同使用时，也会有事件热区偏移的问题。而且百度地图使用 bd-09 坐标系，和其他图商不通用，引擎的性能方面也差点意思，个人不推荐在开发中使用百度地图。然后一些拖拽库，如甘特图插件，可能也不支持，他们在计算鼠标位置时同样没有考虑 scale 后的元素的视觉大小。 #### 用什么单位不支持的单位：vh、vw、rem、em 让我诧异的是，老有人问我该用什么单位，主要徘徊在 px 和 % 之间，[加群](https://juejin.cn/user/3919115686512942)的同学多数是因为用了相对单位，导致留白了。不过人各有所长，跟着各位大佬我也学到了很多。看下图 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/51bb3aa1e6ca4940aa87801678835f86~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1317&h=641&s=16171&e=png&b=1f1f1f) 假如有两个宽度为1000的元素，他们内部都有一个子元素，第一个用百分比设置为 `width:50%;left:1%` , 第二个设置为 `wdith:500px;left:10px` 。此时，只要外部的1000px的容器宽度不变，这两个内部元素在视觉上是一模一样的，且在实际数值上也是一模一样的，他们宽度都为500px，距离左侧10px。但是如果外部容器变大了，来看一下效果： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/add306268db34700a6a09039ae62a030~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1353&h=643&s=20925&e=png&b=1f1f1f) 在样式不变的情况下，仅改变外部容器大小，差异就出来了，由上图可知，50%的元素依然占父元素的一半，实际宽度变成了 1000px，距离左侧的实际距离变成了 20px。这当然不难理解，百分比单位是根据最近的、有确定大小的父级元素计算的。所以，应该用什么单位其实取决于想做什么，举个例子：在`1920*1080`基础上开发，中间的地图写成了宽度为 500px ，这在正常情况下，看起来没有任何问题，它大概占屏幕的 26%，当屏幕分辨率达到`4096*2160`时,它在屏幕上只占 12%，看起来就是缩在一角。而当你设置宽度为26%时，无论显示器如何变化，它始终占屏幕26%。 autofit.js 所干的事，就是把1000px 变成了 2000px或者把2000px变成了1000px，并给它设置了一个合适的缩放大小。 #### 图表、图片拉伸背景或各种图片按需设置 `object-fit: cover;`即可图表如echarts一般推荐使用百分比，且监听窗口变化事件做resize() ## 结语再次感慨，大道至简，事情往往没有那么复杂，祝各位前程似锦。