关于前端:前端大屏展示方案选择

32次阅读

共计 902 个字符,预计需要花费 3 分钟才能阅读完成。

现有的桌面 web 我的项目须要给大屏展现用,可能会遇到大分辨率导致显示不清晰的问题,上面是解决方案思考和抉择。

大屏展现

计划一:scale

思路

body 宽度定死为 1920,那么网页内容就会渲染在宽度为 1920 的容器内。之后计算相应比例把它放大到整个屏幕。

依据浏览器窗口大小计算缩放值(如 innerWidth 为 3840),从左上角开始缩放。

width: 1920px;
transform: scale(2);
transform-origin: left top;

益处:

简略

问题:

  • 图表库是基于 canvas 实现,像素值固定的。放大后失真,有马赛克成果。防止起来很麻烦。如:在图表渲染前通过获取容器高宽,动静把高宽放大相应倍数后使再用款式放大。
  • 常见 UI 库,如 elementUI,弹出框等组件是应用以 body 为父元素的相对定位,单位为 px,会因为 body scale 而不见。我的项目代码的一些交互也会异样如鼠标悬浮成果)

总结:

有交互须要或基于 canvas 实现的图表,则页面不合适采纳此计划。

计划二:rem

思路

  • 小于某宽度的屏幕(如 2500px)base 为 10px(不便计算),大于此宽度,依据浏览器窗口宽度比照 1920 屏幕计算比例,如 3840 的屏幕 base 为 20px。
  • 所有单位不可呈现 px
  • 字体、行高应用 rem
  • 宽度最好应用 flex 比例,百分比,如果用 rem,须要思考显示不下的解决。

对于图表:

动静传入缩放值,base 字号、折线图宽度、图例大小等等相乘得最终值

益处 :逻辑简略。适应各种屏幕,社区通用适配计划

问题 :对于现有我的项目,px 值须要全局替换。

解决形式:应用第三方库,在打包时把款式全替换为 rem,对于非图表局部不须要改代码。

款式尽量不要写在 style 里,不仅丑(影响可读性),还造成可能打包工具可能辨认不到无奈对立解决。

留神

其余款式最好在 body 上设置,而不是 html。在 html 上设置以 rem 为单位的款式,Safari 上还是会应用浏览器默认值

如上面代码(font-size base 为 10)

html {min-height: 90rem;}

Safari 默认的 base 是 16px,理论网页的最小高度会变成 16 * 90,而不是 10 * 90

正文完
 0