数字化大屏
对于数字化大屏来说的话
我们一般会去使用vw,vh这类的响应式单位和通过百分比来控制和实现我们对数字化大屏的一些适配啊!
如果没有特殊需求的话,这种常见的1920×1080的像素比例已经能够满足我们平常生活中的大部分场景了,部分一些超大屏的展示的话,我们就有展示大屏幕的大图表这类需求了。
流式布局
刚开始的话,我们是想用了的一种流式布局的方法来实现。
-
能够更好的去适应屏幕,能够将屏幕大小的分辨率自动调整整体的一个页面布居,使得用户不论是大屏幕还是小屏幕都能够去适应我们这个系统
-
能够更好的支持多种设备类型,比如我们的手机、平板、PC啊都能够任意的访问我们这个平台,无需做一些额外的调整
-
并且能够自动调整字体大小以及换行方式,使得不同的语言字体能够在不同的设备上得到更好的显示
但是在我们在整体的更新完之后,在我自己的自测下,我尝试了多种不同大小的设备,当一个图表板块的数据过多时,就发现一个较小的手机在适配是会出现一些过度缩小的情况,以及造成一些排版上的问题,这样就会导致用户有一种难以阅读和查看的感觉,
还是需要一些额外的手段来进行调整
这时候我的想法是使用了css3的媒体查询来解决我们的一个过小以及排版上的问题
以屏幕尺寸的大小区分四个大类,来适配不同的屏幕 ---------手机、平板、pc、大屏
还有就是在适配超大分辨率的屏幕时我们也发现由于我们分辨率调整的太大,这时候我们字体就会很清晰,那么就会感觉越来越小
我们使用了一种超分辨率的字体,让我们的屏幕上的字看起来不会有太大的缺陷。