大屏适配方案

最新推荐文章于 2024-12-12 09:54:21 发布

原创最新推荐文章于 2024-12-12 09:54:21 发布 · 528 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

大屏可视化中，为适应不同分辨率和宽高比的大屏，有两种主要的适配方案。一种是使用vw/vh单位保持图表尺寸和位置的灵活性，防止拉伸，适合原型图标多的情况；另一种是按1920*1080的设计稿使用px单位，通过网页缩放适应屏幕，适用于比例变化不大的场景。每种方法都有其优缺点，需根据实际情况选择。

大屏可视化一般是用于大屏展示, 而不同的大屏设备分辨率和宽高比不太一样, 所以同一个网页需要在不同的大屏上完美展示, 就需要做大屏适配 , 大屏适配有以下两种解决方案

1, 图表的尺寸和位置统一使用vw, vh做单位, 宽度都用vw单位, 高度都用vh单位

好处:排版灵活,不会出现图标拉伸
缺点:单位vw vh单位设置复杂
用法:适用于要保证图片不变形,原型图标比较多的情况
2, 按照UI设计稿的原始尺寸(1920*1080) ,使用px为单位实现固定尺寸的图表, 适配时,使网页缩放以占满整个屏幕
好处:操作方便不易出错
缺点: 图形和文字会拉伸变形
用法: 适用于缩放比例不大,微调的大屏,原始比例和大屏比例差别不大的情况下