当前位置: 首页 > Web前端 > HTML5

公司大屏开发经验

时间:2023-04-05 20:58:43 HTML5

大屏开发经验排版篇由于大屏不对外开放,可以使用固定浏览器。在这种情况下,其实可以使用一些比较新的技术。所以我更喜欢在布局中使用flexbox技术。由于大屏的画面非常大,设计师给出的设计图通常尺寸都很大。其实,设计师不知道的是,屏幕再大,也不过是一个显示屏的大小。其实这块需要的是比例缩放。设计稿通常是一个屏幕的大小,不需要其他用户操作,比如滚动。所以在布局之前,需要设置外框尺寸html,body{height:100%;}大屏首先要做的就是解决尺寸的差异,这就体现了flexbox的优势。因为你只需要量好设计稿的实际尺寸,直接在flex上设置即可。比如设计稿的尺寸是3200px,对应flex:3200。设计稿给出的一页。一开始我们是按照一页开发的。但是投影到大屏幕的时候就有问题了,因为很大,走样很严重。所以后来把大屏分开,把设计稿的每一部分拆分成一个页面,每个小屏显示一个页面。这样一来,走样的情况就大大减少了。还解决了一个问题,就是全屏显示时字体太大。即使字号很小,也会显示很大(chrome默认最小字号是12px,如果需要显示更小,需要修改浏览器配置)。分开就不会有这样的问题了。