跳到主要内容

谈谈大屏可视化

大屏适配​

适配大屏方案​

  • 原始方案：rem、vh/vw、scale

scale​

  • 使用scale缩放适配大屏

优缺点：​

  • 优点： 使用scale适配大屏。实现数据大屏在任何分辨率的电脑上均可安然运作。无需特定编写rem单位，也不需要考虑单位使用失误导致适配不完全。您即使全部用position去定位在其他屏幕上都不会乱。（%和px随便用）
  • 缺点：
    • 不同尺寸屏幕，会留白 ，两边留白
    • 当缩放比例过大的时候，字体会有一点点模糊 （影响不是很大）
    • 地图上缩放会有问题 (点击坐标会不对，tooltip也有问题、地图偏移问题

解决留白问题：

  • 解决：是因为注入的宽高，跟电脑实际分辨率宽高不一致的原因
  • 问题：注入的宽高，跟分辨率宽高一致，为什么还有留白？
  1. 一致的话，只需要将浏览器全屏就可以看到正确的效果.
  2. 将注入的宽高换成document.documentElement.clientWidth、document.documentElement.clientHeight

rem​

  • rem是基于根元素html的字体大小的来计算的
  • 动态的计算出根元素html的font-size从而改变rem的大小。

rem如何动态改变根的html的font-size

原理：（felxible.js）

  • 1、计算html的font-size
  • 2、监听窗口的resize事件，来动态计算根元素html的font-size
js
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

为什么这里除以10，假设设计稿是750px

  • 习惯性定义把 10rem 定义为 屏幕宽度，人为定义的适配规则

  • 一整屏宽度 = 10rem = 750px

  • 1rem = 75px

  • html font-size = 750/10 = 75px

优缺点​

  • 优点:

    • 兼容性好，所有的主流浏览器都支持，可兼容旧版本浏览器

  • 缺点：

    • 主要针对宽度适配，高度无法适配

    • 图表需要单独对字体、间距、位移的适配

vw/vh​

  • vw/vh根据页面的可视区域来变化
  • 将像素值（px）按比例换算为视口宽度（vw）和视口高度（vh），能够实时计算图表尺寸、字体大小等
  • px转换vw/vh，可通过插件
    • px-to-vw
    • 原理：
      • 1、在写css的时候，仍然使用px。在构建的时候，会自动转成vw
      • 2、通过公式来计算vw/vh值
        • vw = (目标像素 px / 设计稿宽度) * 100
        • vh = (目标像素 px / 设计稿高度) * 100
      • 3、假设设计稿宽度是 375px（常见于移动端），并想将一个 150px 的元素转为 vw：
        • vw = (150 / 375) * 100 = 40vw

优缺点​

  • 优点:
    • 宽度和高度都可以适配
    • 不依赖js脚本
  • 缺点：
    • 图表需要单独对字体、间距、位移的适配