1 数据大屏 - 4k屏幕自适应 - 《数据可视化实战解决方案》

浏览器突破12px像素限制

用 css的 transform：scale进行缩放

.style {
    transform: scale(0.5)
}

window.addEventListener('resize', () => {});

监听 onresize事件，动态计算 scale的值

例如；页面宽度 = 1600 900
**比例 = 1600/3840 900/2160，计算出宽高比例**

.scale {
    transform: scale(1600/3840, 900/2160);
  transform: scale(0.4166666666666667, 0.4166666666666667)
}

3840 * 2160 固定宽高比例
分辨率为4k，有效像素为8,294,400
水平方向的像素数为3840，垂直方向的像素数为2160

在数字技术领域，通常采用二进制运算，而且用构成图像的像素来描述数字图像的大小。
由于构成数字图像的像素数量巨大，通常以K来表示。2的10次方即1024，
因此：
1K=2^10=1024，
2K=2^11=2048，
4K=2^12=4096

4K图像指：水平方向每行像素值达到或者接近4096个的图像，
多数情况下特指4096*2160分辨率；
3840或者4096这两者都可以算是4K分辨率，

不过这两者都是4K分辨率，这是由于使用范围的不同，
4K图像也有各种各样的衍生分辨率，例如

1920×1080分辨率
传统数字影院的2K分辨率的大屏幕，2048×1080分辨率
定义”不等于“标准”，一个标准只能应用在一定范围内，不存在全世界任何领域通用的4K分辨率标准

第一种 3840×2160：这是最常见，最多的一种4K分辨率

第二种 4096×2160：这种分辨率并不多见，跟第一种不同的是在比例格式上。

第三种 3840×1632：这种常见在4K电影上，因尚未加上上下黑边，所以会有一个这样的分辨率。最佳的欣赏还是全屏无黑边。

1k的水平分辨率是1024
2k的水平分辨率是2048
4k的水平分辨率是4096
没有3K视频

因为数据大屏都是用 4k屏幕显示的
如果屏幕分辨率小于 4k的，就要进行缩放，进行屏幕的适配
否则会出现两边留白的问题

2560x1440
2k分辨率是2560x1440，即1440P

1920* 1080
1K分辨率是1920x1080，即1080P