数据可视化将数据通过各种视觉通道映射成图形,可以使得用户更快、更准确的理解数据。 大屏用途用于公司展厅、日常经营监控,还有些特殊行业如交通、运输、工厂制造。 大屏效果展示1.固定尺寸的“真实”大屏一般使用在企业的巨大的显示器上 用来展示、监测数据情况,一般是不需要频繁操作的。这种只在固定大的屏幕上的大屏,完全可以不使用自适应方案。 2.大屏宽高等比例适应(1)使用felx布局要点:使用flex各种布局,结合元素使用百分比 使用场景:H5页面、简单后台业务系统页面 大神笔记 (2)使用rem单位参考链接:前端自适应实现方法前端学习笔记-DS的博客-CSDN博客前端自适应 3.大屏自适应最优解决方案 ==> transform:scale大屏使用rem 耗时 而且对浏览器最小字体不支持, 使用transform:scale可以节省百分之九十工作量 好处不多说:看一篇文章 学习一下 咱们再来实战! 谈谈关于CSS中transform属性之scale - 热爱前端知识 - 博客园 CSS3 transform-origin 属性 | 菜鸟教程 4.实战开始【速看!重点】(1)创建一个组件SacleBox (4)码自己页面 注意: (1)使用px做单位,不使用rem (2)ScaleBox内部页面元素最大的盒子按照19201080为容器 严格计算。所有宽高加起来为19201080 (3)最好不要使用百分比分配宽高
至此可以完成大屏自适应了,组件化之后也更好用,前期可以直接单独写页面,最后再加上ScaleBox即可,是非常方便简洁的方法。
缺点: 经实际使用,发现问题存在非全屏下左右两边会存在一定的空白。在非全屏情况下,由于导航栏存在,页面的真实高度已经不是1080了,宽度自然会变小。会按基础尺寸强制缩小展示! 优点: 1.保证页面宽高在任何情况下等比例缩放 2.页面性能最优且代码简洁 免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
|