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