共计 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。
正文完