px 与 rem 单位的转换

屏幕计算

// 宽度比率
const htmlHeight = Math.max(this.minHeight, document.documentElement.clientHeight);
const heightRath = Math.round((htmlHeight / this.designHeight) * 10000) / 10000;

// 高度比率
const htmlWidth = Math.max(this.minWidth, document.documentElement.clientWidth);
const widthRath = Math.round((htmlWidth / this.designWidth) * 10000) / 10000;

// 设计稿是否是宽屏
const wideScreen = this.designWidth > 1920;

// 设计稿为单屏时：一般情况下，用户屏幕高度达不到1080（非全屏使用且浏览器有状态栏），根字体需按照宽度比率计算
// 注意，此设置只适合办公系统，大屏系统一般都是全屏使用，建议直接使用高度比率
window.pageRath = wideScreen ? heightRath : widthRath;
if (window.pageRath > 1) {
  window.pageRath = 1;
}
if (window.pageRath < 0.75) {
  // 12 / 16 = 0.75
  window.pageRath = 0.75;
}

设置浏览器默认font-size，也是px和rem转换的依据

let width = '100%';
if (wideScreen) {
  // 若屏幕宽度小于设计宽度，使用设计宽度（此时有横向滚动条），且需要按照设计稿等比例缩放宽度
  if (document.documentElement.clientWidth < this.designWidth) {
    width = `${this.designWidth * heightRath}px`;
  }
}
document.documentElement.style.cssText = wideScreen
  ?`width:${width};
     height:${htmlHeight}px;
     font-size:${window.pageRath * 100}px;
     overflow-y:${scollY ? 'auto' : 'hidden'};`
  : `width:100%;
     height:100%;
     min-width:${this.minWidth}px;
     min-height:${this.minHeight}px;
     font-size:${window.pageRath * 100}px;
     overflow-y:${scollY ? 'auto' : 'hidden'};`;

使用

计算当前模块的实际高度，一般用于首页最后一个模块，高度不确定时
设除此模块外剩余高度，为在全屏下的790px
得到此模块实际高度px

const height = document.body.clientHeight - 790 * window.pageRath;