缘起
最近刷技术文档的时候刷到了大屏制作,正好公司也有相关业务,于是通过查阅文档,总结后找到了两种还算靠谱的方法,分享给大家。
难点
难度其实主要有两点,第一点如何高质量的还原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是常用的。
尾声
知难行易,不断探索新的技术,对老技术温故而知新,多多研究,才能更加优秀!