• 需要：

    数据大屏页面，适配各种尺寸的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 + ')'}