大屏适配篇 —— scale缩放适配

各种适配方案的简单介绍

方案	实现方式	优点	缺点
vh vw方案	1.1.按照设计稿的尺寸，将px按比例计算转为vw和vh	+ 相对于固定的像素单位（如px）更加灵活，可以实现更好的自适应效果。 + 可以根据视窗大小动态调整元素的大小，适配不同的设备和分辨率。	1.每个图表都需要单独做字体、间距、位移的适配，比较麻烦
scale	1.通过 scale 属性，根据屏幕大小，进行整体缩放	1. 相对简单易实现：通过CSS的transform属性设置scale可以很容易地对页面进行缩放处理。 2. 保持页面结构：使用Scale可以在不改变页面结构的情况下实现屏幕适配，保持页面元素的相对位置关系。	1. 可能造成画面失真：由于使用缩放操作，页面元素可能会出现拉伸或压缩的情况，导致页面视觉效果不佳。 2. 对性能的影响：页面进行缩放操作可能会增加页面的重绘与重排次数，影响页面性能。 3.当缩放比例过大时候，事件热区会偏移。
rem + vw vh	1.获得 rem 的基准值 2.动态的计算`html根元素的 3.图表中通过 vw vh 动态计算字体、间距、位移等	+ 响应式设计能够很好地适配不同屏幕大小的设备，提升用户的浏览体验。 + 使用 rem、vw 和 vh 单位可以让页面元素按比例自动调整大小，减少手动计算和设置的工作量。	+ 对于不