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