jQuery调整窗口大小

我有以下JQuery代码:

$(document).ready(function () {

var $containerHeight = $(window).height();

if ($containerHeight <= 818) {

$('.footer').css({

position: 'static',

bottom: 'auto',

left: 'auto'

});

}

if ($containerHeight > 819) {

$('.footer').css({

position: 'absolute',

bottom: '3px',

left: '0px'

});

}

});

唯一的问题是,这仅在首次加载浏览器时有效,我是否containerHeight还希望在调整窗口大小时进行检查?

有任何想法吗?

回答:

(如果您只是通过调整大小来设置样式(媒体查询),最好的方法是CSS)

[

回答:

.footer 

{

/* default styles applied first */

}

@media screen and (min-height: 820px) /* height >= 820 px */

{

.footer {

position: absolute;

bottom: 3px;

left: 0px;

/* more styles */

}

}

回答:

window.onresize = function() {

if (window.innerHeight >= 820) { /* ... */ }

if (window.innerWidth <= 1280) { /* ... */ }

}

回答:

$(window).on('resize', function(){

var win = $(this); //this = window

if (win.height() >= 820) { /* ... */ }

if (win.width() >= 1280) { /* ... */ }

});

回答:

这是绑定到调整大小时会注意到的第一个问题。当用户手动调整浏览器的大小时,调整大小的代码被称为LOT,并且可能感觉很时髦。

要限制大小调整代码的调用频率,可以使用下划线和lowdash库中的去抖动或限制方法。

  • debounce将仅在LAST调整大小事件后的毫秒数内执行调整大小代码。当用户调整浏览器的大小之后,只想调用一次调整大小的代码时,这是理想的选择。这对于更新图形,图表和布局很有用,因为更新每个调整大小事件可能会很昂贵。
  • throttle只会每X毫秒执行一次调整大小的代码。它“限制”了代码的调用频率。这在调整大小事件中并不常用,但是值得注意。

如果没有下划线或破折号,则可以自己实现类似的解决方案: JavaScript /

JQuery:$(window).resize调整大小完成后如何触发?

以上是 jQuery调整窗口大小 的全部内容, 来源链接: utcz.com/qa/434827.html

回到顶部