JS监听窗口变化及获取页面大小

JS监听窗口变化及获取页面大小

• • • 一、页面初始化
    • 二、页面大小改变时
    • 大致思路：

今天做页面兼容的时候突然遇到这个问题，就简单写写；

监听页面大小改变主要注意两方面，一个是初始化的时候，另一个是页面大小改变的时候重新设置；

一、页面初始化

// 初始化加载数据
window.onload = function () {
  // 监听窗口变化
  windowHiegh();
}

二、页面大小改变时

// 监听页面窗口变化
window.onresize = function () {
  windowHiegh();
}

下面是计算的方法：

// 页面窗口高度计算
function windowHiegh() {
  // 初始化加载高度
  let InitRightHeight = parseFloat($(".right").height());

  // margin区域高度
  let logMarginHeight = parseFloat($(".logical").css("marginBottom"));  // 逻辑门外边距
  let algMarginHeight = parseFloat($(".alg-rules").css("marginBottom"));  // 运算法则外边距
  // 实际高度
  let rightHeight = InitRightHeight - logMarginHeight - algMarginHeight;

  // 逻辑门高度
  let logicalInHeight = rightHeight * 0.12;
  $(".logical").css("height", "" + logicalInHeight + "px");
  let iconsHeight = $(".logical").height() - $(".logical-title").outerHeight(true);
  $(".icons").css("height", "" + iconsHeight + "px")

  // 运算法则高度
  let alg_rulesHeight = rightHeight * 0.25;
  $(".alg-rules").css("height", "" + alg_rulesHeight + "px");
  let rules_boxeHeight = $(".alg-rules").height() - $(".rules-title").height() - $(".alg-rules-search").height();
  $("#rules-box").css("height", "" + rules_boxeHeight + "px")

  // 参数高度
  let argumentsHeight = rightHeight * 0.63;
  $(".arguments").css("height", "" + argumentsHeight + "px");
  let agruments_contentHeight = $(".arguments").height() - $(".arguments-titile").height();
  $(".agruments-content").css("height", "" + agruments_contentHeight + "px")

  let dataHeight = agruments_contentHeight;
  let data_boxHeight = $(".data").height() - $(".data-search").height()
  $(".data-box").css("height", "" + data_boxHeight + "px")

}

大致思路：

一、页面分为三个部分，上中下

二、先获取页面总高度，然后每个部分按照百分比进行计算

三、盒子设置 box-sizing属性，用来计算的实际高度 = 页面总高度 - 盒子外部总 margin；

四、单个区域的高度 = 实际高度 * 百分比

五、单个区域内部变化高度 = 单个区域高度 - 单个区域内部固定高度

大致思路是这样的，有问题的地方欢迎大佬们指正，代码是自己实际的项目，就没有写简单的例子了