大屏制作的探索

缘起

---

最近刷技术文档的时候刷到了大屏制作，正好公司也有相关业务，于是通过查阅文档，总结后找到了两种还算靠谱的方法，分享给大家。

难点

---

难度其实主要有两点，第一点如何高质量的还原ui图，第二点如何宽高自适应。

高质量的还原ui图

---

这个问题对一个成熟的开发来说其实不大，唯一的问题可能是不同尺寸的设备上的显示问题，比如我们在手机端自适应的时候，有1px边框问题，大屏也会遇到类似的问题，重点排查解决就好了。

宽高自适应

---

宽度自适应，这个很容易，我们对比移动端，有rem，em，百分比等等，高度自适应呢，移动端我们想到了100%嵌套，100vh，但是大屏呢，浏览器兼容性问题，有没有一个方案能解决大部分问题呢。答案是有，下面为大家介绍两种方案，其实不止是两种。

• transform
• rem

transform

---

这个其实很简单，利用transform做缩放，具体步骤如下：

• 通过各种方法获取当前屏幕的宽高，可以用100%嵌套，也可也100vh，这里为了方便，默认为width，height
• width/大屏的ui宽度，我们称为scale1，height/大屏的ui高度，我们称为scale2
• 给最外层元素使用transform: scale(scale1, scale2)
• 很关键的一步，最外层的元素加上transformOrigin: 0 0，原点默认是中心，修改到左上角才可以，才能展示正确的效果。
• 最外层元素宽高都是大屏ui的宽高，然后再来个绝对定位，当然超出要覆盖。
• 最后一步，用resize监听整个页面的窗口的大小，调整scale1，scale2
• 然后按照大屏ui的宽高，直接以px为单位，写页面就好了

rem

---

这个其实也很简单，rem只是个中间变量，只是写入了浏览器内核，能被浏览器解析罢了。em等等，其实一个道理。
先来说说rem的原理，假设大屏的ui是1920 * 1080，我们把rem定义为1rem是10px，那么换算下来，192rem * 108rem，这个时候如果时间的屏幕只有960 * 540，那么rem的值也会转换，可以参考手机，rem值会随着屏幕大小的变化而变化，这样在960*540的屏幕下，rem变成了5px，完美的解决了问题。
接下来只要使用resize监听屏幕大小变化，适当修改rem大小就好了，按照换算后的rem大小，来写大屏ui的宽高。
其实只要是浏览器引擎内置的中间单位都可以，而不仅仅是rem，只是rem是常用的。

尾声

---

知难行易，不断探索新的技术，对老技术温故而知新，多多研究，才能更加优秀！