欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-21 12:05:41
...


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

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

一、页面初始化

// 初始化加载数据
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;
四、单个区域的高度 = 实际高度 * 百分比
五、单个区域内部变化高度 = 单个区域高度 - 单个区域内部固定高度

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