数据可视化-大屏适配

186 阅读4分钟

一、认识大屏设备

1. 认识大屏

  • 在开发网页时,一般适配最多的屏幕尺寸
    • PC端电脑:1920px * 1080px
    • 移动设备:750px * auto
  • 生活中,经常会见到一些比较大的屏幕,比如:指挥大厅、展厅、展会中的大屏。这些设备就可以称之为大屏设备。
  • 大屏的应用场景
    • 通常用在数据可视化,借助于图形化手段,清晰有效地传达与沟通信息。
  • 大屏的硬件设备的分类
    • 拼接屏、LED屏、投影等。

2. 大屏设备

  • 拼接屏
    • 拼接屏就是很多屏幕按照一定拼接方式拼接而成的。
    • 常见的使用场景有指挥大厅、展厅、展会等等。
  • LED屏
    • LED也是现在大屏中常用的硬件,它是若干单体屏幕模块组成的,它的像素点计算及拼接方式与拼接屏有很大区别。
    • LED可以看成是矩阵点阵,具体拼接方式也会根据现场实际情况有所不同,拼接方式的不同直接影响到设计的尺寸规则。

3. 定设计稿尺寸

  • 拼接屏
    • 大多数屏幕分辨率是1920*1080,拼接屏可以按照横竖计算后的总和作为设计尺寸。
    • 正常设计建议最好保持在4K内,超过4K会产生很多问题。
    • 尺寸过大的不太适合按照原尺寸设计,超过4K保持大屏的等比缩放即可。
  • LED屏
    • LED大屏是由若干单体屏幕模块组成的,LED屏有很多规格,但是规格计算方法相同。
    • 比如,用单体为500*500的作为标准计算,每个单体模块像素点横竖都为128px。
    • 如果横向12块竖向6块,横向像素为12812=1536px,竖向1286=768px,建议见谅保持在4K以下。
  • 移动端大屏
    • 移动端的大屏展示,基本按照实际尺寸设计即可。
    • 比如750auto,设计稿尺寸:750auto

二、大屏适配方案

1. 百分比设置

2. rem单位 + 动态设置html的font-size

  • 动态设置HTML根字体大小和body字体大小(lib_flexible.js)
    • 将设计稿的宽(1920)平均分成24等份,每一份为80px。
    • HTML字体大小设置为80px,即1rem=80px,24rem=1920px。
    • body字体大小设置为16px。
    • 安装cssrem插件,root font size设置为80px。这是px单位转rem的参考值。
    • 接着就可以按照 1920px * 1080px 的设计稿开发,此时的页面已经是响应式,并且宽高比不变。
//---lib_flexible.js---
(function flexible(window, document) {
  var docEl = document.documentElement;
  var dpr = window.devicePixelRatio || 1;

  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      // body 字体大小默认为 16px
      document.body.style.fontSize = 16 * dpr + "px";
    } else {
      document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
  }
  setBodyFontSize();

  // 这里默认平均分成 10 等分(适用移动端)
  // set 1rem = viewWidth / 24 ;(使用pc端)
  function setRemUnit() {
    var rem = docEl.clientWidth / 24;  // 1920 / 24 = 80 
    docEl.style.fontSize = rem + "px"; // 设置 html字体的大小 80px
  }

  setRemUnit();

  // reset rem unit on page resize
  window.addEventListener("resize", setRemUnit);
  window.addEventListener("pageshow", function (e) {
    if (e.persisted) {
      setRemUnit();
    }
  });

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement("body");
    var testElement = document.createElement("div");
    testElement.style.border = ".5px solid transparent";
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add("hairlines");
    }
    docEl.removeChild(fakeBody);
  }
})(window, document);

3. vw单位

  • 直接使用vw单位
    • 屏幕的宽默认为100vw,那么100vw=1920px,1vw=19.2px。
    • 安装cssrem插件,body的宽高(1920px*1080px)直接把px单位转vw单位。
    • 接着就可以按照 1920px * 1080px 的设计稿开发,此时的页面已经是响应式,并且宽高比不变。

4. flex弹性布局

5. scale等比例缩放(推荐)

  • 方案一:直接根据宽度的比率进行缩放。(宽度比率=网页当前宽/设计稿宽)
// 设计稿:1920 * 1080
// 适配:1920 * 1080   3840 * 2160   7680 * 2160

// 1. 设计稿的尺寸
let targetX = 1920
// 2. 拿到当前设备(浏览器)的宽度
let currentX = document.documentElement.clientWidth || document.body.clientWidth
// 3. 计算缩放比例
let scaleRatio = currentX / targetX // 参照宽度进行缩放
// 4. 开始缩放网页
document.body.scale = `transform: scale(${scaleRatio})`
  • 方案二:动态计算网页宽高比,决定是否按照宽度的比率进行缩放。
// 设计稿:1920 * 1080
// 适配:1920 * 1080   3840 * 2160   7680 * 2160

// 1. 设计稿的尺寸
let targetX = 1920
let targetY = 1080
let targetRatio = 16 / 9

// 2. 拿到当前设备(浏览器)的宽度
let currentX = document.documentElement.clientWidth || document.body.clientWidth
let currentY = document.documentElement.clientHeight || document.body.clientHeight

// 3. 计算缩放比例
let scaleRatio = currentX / targetX // 参照宽度进行缩放
let currentRatio = currentX / currentY

// 4. 开始缩放网页
if (currentRatio > targetRatio) {
    // 超宽屏
    scaleRatio = currentY / targetY // 参照高度进行缩放
    document.body.style = `width:${targetX}px; height: ${targetY}px; transform: scale(${scaleRatio}) translateX(-50%); left: 50%;`
} else {
    document.body.style = `width: ${targetX}px; height: ${targetY}px; transform: scale(${scaleRatio})`
}

三、开发注意事项

  • 字体大小设置问题(非scale方案需要考虑)
    • 如果使用rem或vw单位时,在JS中添加样式,单位需要手动设置rem或vw。
    • 第三方库的字体等默认的都是px单位,如:element、echarts,因此通常需要层叠第三方库的样式。
    • 当大屏比例更大时,有些字体还需要相应的调整字号。
  • 图片模糊问题
    • 切图时切1倍图、2倍图,大屏用大图,小屏用小图。
    • 建议使用SVG矢量图,保证放大缩小不会失真。
  • ECharts渲染引擎的选择
    • 使用SVG渲染引擎,SVG图扩展性更好。
  • 动画卡顿优化
    • 创建新的渲染层、启用GPU加速、善用CSS形变动画。
    • 少用渐变和高斯模糊、当不需要动画时,及时关闭动画。

四、大屏项目实战