阅读 2030

前端大屏展示方案选择

现有的桌面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

文章分类
前端
文章标签