简述

大家应该都经历过公司年会抽奖环节吧，当大屏幕滚动起来的时候，也是每次年会的最高潮，最最激动的时刻。那么作为前端，你一定曾被大屏幕的适配搞得很烦躁吧，同样的这次我也被搞得相当烦躁。在此，我分享一下这次抽奖功能开发的心得，也是帮助大家认识到如何去适配大屏，尽量少趟坑。

项目初始

“帮忙做一个年会抽奖吧”,任务就这么开始了，没有原型，没有需求，什么都没有，哈，只能靠个人魅力去实现了。我当机立断立即拉了一群人，设计，前端，后端，测试，业务，开了一个简会，定下了需求方向，就做一个轮播头像滚动的活动。

首先在超大屏幕上，必须要有头像，下面的人才能看的清；时间不多，一次性的活动，就做个轮播滚动就好了，不做花里胡哨的了。

然后确定了大屏幕分辨率为：6144x1792 (24/7) 。

确定抽奖算法，写在服务端。轮播滚动数据由前端滚动，最后中奖名单由服务端计算给予，在前端展示。最后服务端导出各个轮次的中奖名单，供应行政兑奖。

项目开发

开发时，感觉很简单,大屏是 6144x1792,那本地电脑是 1920x1080,但按照比例其实展示的应该是 1920x560,反正宽按照 1920 做,下面多出来的那一接纯色填充就好。

拿到设计图之后发现尺寸是按照 6144 设计的，那没关系通过蓝湖换算成 1920 的比例。当时就想到所有的单位乘以一个变量，到时候尺寸就可以在 1920 和 6144 之间随意切换了。同样也可以用 rem 为单位去写，只要最后改改更节点的大小就好了。

开发也很顺利，卡卡卡的就写完了，然后给予测试进行验收测试。为了模拟大屏幕的像素，使用 chrome 模拟器，改了设备分辨率。这样确实挺完美了，一切都按照预期的进行。

实地验收

年会前两天，一定要去现场做一个彩排和验收（这个很关键）。到会场后，很习惯的切到了 6144 的分辨率，理论上只要双屏将 6144 分辨率的页面放到大屏幕一侧就好了。

第一个懵逼点：以前都是双屏能直接看到另一个屏幕的，现在到后台了，只能看到自己的屏幕，更本不知道有没有把页面拖到大屏幕上。

第二个懵逼点：废了九牛二虎之力，连了个无线鼠标，坐在大屏幕前，把网页全屏了，但发现竟然没有想象中的完美展示，而是巨大无比，就像是在自己电脑上展示了 6144 分辨率的效果。

第三个懵逼点：最后讨论后，发现上面那个切双屏的方式肯定是不合理的，同时查了资料之后发现 mac 外接屏幕分辨率也是有限制的最大 1920，同样这样操作太累了，所以后来采用了镜像模式，应该就是自己电脑上是怎么样，大屏幕就是怎么样。那么就只要我电脑适配就好了，又切到了 1920 的分辨率，想着大屏幕上应该就可以按照比例适配了。然后发现自己电脑上下面多了一大块纯色，但在大屏幕上下面也是多了一大块纯色。

想了好久，大概想明白了，镜像就是我电脑上是啥就大屏也是啥。比如我电脑是方的，那活动就展示在上面一半，下面一半没有内容，投射到大屏幕上后，其实就是把我当前的屏幕效果，百分百填充到大屏幕上。所以也是不是按照自己想的那样就能适配的。继续思考中……

想了好久，那就两种方式：1.要么找一个工具能够模拟 6144x1792 的分辨率，然后把它投影上去。2.要么只能自己电脑上全屏适配，再投影上去。最后工具没找到，选择了第二种方式。

立即在现场，改起了样式，宽高拉到 100%，然后一些间距高度，看着大屏幕，一点一点磨了起来。最后差不多就适配好了。

最后

上面描述的适配过程确实很 low,当时现场给予的时间太紧了，只能第一时间用这种方式去适配了。后来仔细想了一想，最初写代码实现时，就要 100%去适配屏幕，核心的内容模块，最好是通过不同设备当前的尺寸去做计算，而得到不同的尺寸，这样就能在不同的设备上，尽量合理的适配。也不需要，换一个大屏又要单独的去适配。这个和手机端的适配确实不太相同，这次的坎坷过程，主要也是没有大屏适配的经验。因为现实需求中，这种需求真的少，希望上面的内容，也能帮助到大家。