关于前端:PC全屏页适配简单思路数据可视化大屏

需要：

数据大屏页面，适配各种尺寸的PC显示屏幕（不同宽高比），存在全屏时和非全屏时高度变动影响。并且有许多须要absolute定位的元素。

思路：

absolute的元素用一个div包裹，外面全副用px做单位，用scale放大放大。

应用过的方法：

• vw, vh, vmin, vmax: 相当于是百分比，成果不是特地现实，设计稿与各个屏幕的宽高比不同，会存在图片变形或者超出可视范畴；
• rem: 也不现实，不能单纯的靠屏幕宽度，宽度统一时，高度变动，也应该尽可能的铺满；
• absolute + px + scale: 通过计算视口的宽高按比例缩放。

实现js

 window.onload = function () {
  calScale();
}

window.addEventListener('resize', function () {
  calScale(); // 倡议加个防抖
})

function calScale() {
  // container 须要的宽高
  const containerHeight = 880, containerWidth = 750;
  // header 导航
  let header = document.querySelectorAll('.header')[0], 
    container = document.querySelectorAll('.container')[0];

  let width = document.documentElement.clientWidth,
    height = document.documentElement.clientHeight,
    resetHeight = height - header.offsetHeight;

  let zoom;
  if (width > containerWidth) {
    // 宽度足够时， 依据高度缩放
    zoom = (resetHeight / containerHeight).toFixed(2)
  } else if (resetHeight > containerHeight) {
    // 高度足够时，依据宽度缩放
    zoom = (width / containerWidth).toFixed(2)
  }

  container.style.transform = 'scale(' + zoom + ')'
}