资讯专栏INFORMATION COLUMN

公司大屏开发心得

Carson / 3309人阅读

摘要:大屏开发心得布局篇因为大屏不是对外开放的,所以可以使用固定的浏览器。因为大屏屏幕很大,设计师给出的设计图通常会有很大的尺寸。所以后来还是把大屏分开了,设计稿的每个部分拆成一个页面,每个小屏幕显示一个页面。

大屏开发心得 布局篇

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

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

html, body {
    height: 100%;
}

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

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

大屏模糊的问题

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

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84228.html

相关文章

  • python综合程序设计——做一个可视化大屏

    摘要:完成可视化热搜榜和国内疫情新增图,提高学生的编程能力和分析问题解决问题的能力。下图为百度微博知乎三大平台的热搜词频统计图。后续我会补上薄弱项,为争取做一名全栈技术人员而奋斗。 ...

    _Dreams 评论0 收藏0
  • 大屏幕和折叠屏: 让您的 Android 游戏登上更大的舞台

    摘要:因此在完成前面的优化适配后,您只需考虑以下四个关键事项最大宽高比支持全屏模式对于确保游戏玩家获得最佳的沉浸式体验至关重要。showImg(https://user-gold-cdn.xitu.io/2019/5/20/16ad2fac98c557d9); 作者 / Ben Gable, Partner Developer Advocate 让我们继续《让您的应用适配更多屏幕》中的话题,不...

    番茄西红柿 评论0 收藏0
  • 一个简单的滑动动画广告项目

    摘要:公司接了一个当下很火热的,网上有各种模板和造好轮子付费使用的滑动广告的项目。其中核心方法是,笔者猜测方法里应该是先取出本里的所有类名含有的元素,运用的方法取出动画的三个属性值,然后加上以触发动画。 公司接了一个当下很火热的,网上有各种模板和造好轮子付费使用的滑动广告的项目。网上的模板大部分类似于PPT,而且文字量很大,大部分都是文字的淡入/淡出效果,想做一个稍微复杂点的。 研究了一下,...

    luzhuqun 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<