专栏首页樯橹代码公司大屏开发心得

公司大屏开发心得

大屏开发心得

布局篇

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

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

html, body {
    height: 100%;
}

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

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

大屏模糊的问题

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Rxjs 响应式编程-第四章 构建完整的Web应用程序

    在本章中,我们将构建一个典型的Web应用程序,在前端和后端使用RxJS。我们将转换文档对象模型(DOM)并使用Node.js服务器中的WebSockets进行客...

    frontoldman
  • [译]关于Node.js streams你需要知道的一切

    Node.js的stream模块是有名的应用困难,更别说理解了。那现在可以告诉你,这些都不是问题了。

    frontoldman
  • Rxjs 响应式编程-第一章:响应式

    现实世界相当混乱:事件不按照顺序发生,应用崩溃,网络不通。几乎没有应用是完全同步的,所以我们不得不写一些异步代码保持应用的可响应性。大多数的时候是很痛苦的,但也...

    frontoldman
  • 我整理了10张超酷炫的可视化大屏,新手也能做,秀到没朋友

    看到这里,你是不是很疑惑,这些令人拍案叫绝的可视化大屏,我怎么才能做出来?不用代码是否可以实现?难不难?

    大数据分析不是事儿
  • 谁说前端不需要懂二进制

    作为一名前端,在工作中也会遇到很多有关二进制处理的需求,如 EXCEL 表格的导出,PDF 的生成,多个文件的打包,音频的处理。

    山月
  • 前端 + AI —— 走进无码时代

    导语:前端智能化,就是通过AI/CV技术,使前端工具链具备理解能力,进而辅助开发提升研发效率,比如实现基于设计稿智能布局和组件智能识别等。

    Yone
  • Python笔记(十六):迭代器

        iterable对象(可迭代的对象):可以使用for循环,例如:字符串、列表 、字典 、集合等

    free赖权华
  • Iterable、Sequece、Iterator、generator

    一篇文章彻底了解 可迭代对象(Iterable)、序列(Sequence)、迭代器(Iterator)、生成器(generator)。

    用户7685359
  • 波场TRON全球社区已超120万用户,独立日后或呈爆发式增长!

    提及波场的创始人孙宇晨,业界对他的声音也是贬褒不一,俗话说树大招风易,人红是非多。凡事都要理性去看待,所以今天就以近段时间波场的发展动态去实事求是看看成果。

    区块链领域
  • 本地启动dubbo服务端和消费端,调用不到的问题

    在本地通过IDEA,用同一个tomcat分别在8088和8089端口启动了dubbo服务端和消费端,结果发现在接口调用的时候,调用不到,并且在项目启动时还报错:...

    海加尔金鹰

扫码关注云+社区

领取腾讯云代金券