大屏数据可视化——屏幕适配方案(多分辨率下）

文章目录

• • 前言
  • 一、一些前提概念
  • • 1.1 常见大屏分辨率
    • 1.2 设备像素
  • 二、适配痛点
  • 三、关于rem
  • 四、关于px2rem
  • 五、适配方案
  • • 5.1 rem自适应缩放
    • 5.2 css3缩放scale
  • 六、demo演示
  • • 6.1 1366*768分辨率下大屏 rem适配方案
    • 6.2 1920*1080缩放150%的情况下rem方案
    • 6.3 1920*1080分辨率150%缩放下scale方案效果
  • 七、更新

前言

基于现目前所做数据可视化项目的不同分辨率兼容需求总结以下适配几种方案供参考。 通常而言数字大屏指的是1920*1080分辨率下的电视大屏，用于图表化的展示关键数据，然而项目大部分是在笔记本上运行，演示，测试，所以不得不把小屏笔记本纳入兼容范围。。。

一、一些前提概念

1.1 常见大屏分辨率

• 1366 * 768 ： 普通液晶显示器
• 1920 * 1080： 高清液晶显示器
• 2560 * 1440： 2K高清显示器
• 4096 * 2160： 4K高清显示器
• 1280 * 720： 笔记本（1920*1080分辨率下系统默认推荐150%缩放比产生的尺寸。。。。）

1.2 设备像素

• viewport： 视窗=浏览器窗口的宽高
• 物理像素（设备像素）： 屏幕显示分辨率像素，每个像素可以根据操作系统设置自己的颜色 和亮度
• 设备独立像素（dip）：密度无关像素，可以认为是计算机坐标系统中的一个点,可用于区分视网膜设备还是非视网膜设备
• css像素（DIPs）： 主要用在浏览器上，一般情况下，css像素称为与设备无关的像素
• 屏幕密度： 设备表面上存在的像素数量（PPI）
• 设备像素比(dpr): 定义了物理像素和设备独立像素的对应关系，设备像素比=物理像素/设备独立像素

二、适配痛点

1. 设计稿按照1920*1080的分辨率，16:9的比例设计， 实际开发中，document窗口不足16:9（高度减掉顶部tab及导航栏，地址栏等）
2. 不同分辨率：实际应用场景中，显示场景不同，不能固定写死px单位
3. 不同比例：不同的显示器宽高比与设计稿不一致
4. 由于大屏数据可视化项目通常用于放在电视或广告屏上展示用，而不允许出现滚动条

三、关于rem

熟悉移动端的自适应方案的朋友对 rem 适应方案，肯定不陌生，最出名的就是阿里的 手淘lib-flexible 方案。

• rem (font size of the root element), 是 css3 的引入的一个大小单位。即相对于根元素的 font-size 值的大小。所谓根元素在网页里一般就是 html.

• 举例如下：

  html{
  font-size:20px;
  }
  test1 {
  width: 1.4rem; //1.4 × 20px = 28px
  }
  test2 {