公司大屏开发心得

大屏开发心得

布局篇

因为大屏不是对外开放的,所以可以使用固定的浏览器。既然这样其实是可以使用一些相对比较新的技术的。所以在布局这块我优先选择使用flexbox技术。

因为大屏屏幕很大,设计师给出的设计图通常会有很大的尺寸。其实设计师并不知道的是大屏屏幕在再大,也不过就是一个显示屏的尺寸。其实那这块需要的就是一个等比缩放。设计稿通常也就是一个屏幕的大小,也不需要滚动等其他的用户操作。所以在布局之前需要首先设置的是外框尺寸

html, body {
    height: 100%;
}

大屏首先要把要把这种尺寸的差异解决,这就体现出来flexbox的优势了。因为只要把量出来设计稿的实际尺寸,直接设置在flex上就可以了。

比如设计稿尺寸是3200px,对应到flex上就是flex: 3200

大屏模糊的问题

大屏一般都是多块屏幕拼凑起来的一整块屏。设计稿给的一个页面。开始的时候我们是按照一个页面进行开发的。但是投到一个大屏的时候问题来了,因为放的很大,锯齿很严重。

所以后来还是把大屏分开了,设计稿的每个部分拆成一个页面,每个小屏幕显示一个页面。这样子锯齿情况就减轻很多。

还解决了一个问题,就是整个屏幕的时候,字体太大。即便字号很小也会显示很大(chrome默认最小字号是12px,如果需要显示更小,需要修改浏览器配置)。分开就不会有这个问题了

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值