在调整大小和浏览器宽度时触发 jQuery

Question

我在 IE 中遇到了背景大小的问题，所以我找到了一个允许它在 IE 中工作的 JavaScript，但我只希望在屏幕宽度低于 768 像素时应用背景大小。

这是我当前的脚本：

$(window).resize(function() {
    if($(window).width() > 768)
       jQuery('#header').css( "background-size", "cover" );
});

一旦你开始调整大小，这就会起作用，但是一旦你低于 768，它就不会删除背景大小，并且初始状态也没有背景大小。有任何想法吗？谢谢！

Answer 1

您的答案几乎是正确的。您需要做的就是添加一个 else。

$(window).resize(function() {
    if($(window).width() > 768) {
       jQuery('#header').css( "background-size", "cover" );
    } else {
       jQuery('#header').css( "background-size", "whatever" );
    }
});

我担心你会到处乱写jQuery，所以你也可以这样做：

jQuery(function( $ ) { // DOM ready and secured jQuery's $ alias

  // Use freely $ alias
  var $header = $('#header'); // Cache your selectors
  $(window).resize(function() {
    $header.css({backgroundSize:$(this).width()>768?"cover":"whatever"});
  });

  // Other $ code here

});

Answer 2

无需 javascript，只需使用 css 和媒体查询。 这比 jQuery/javascript 快很多，而且正好适合这种情况。尤其是在手机上，您会在旋转设备时注意到这一点。此外，较旧的浏览器在调整大小时会减少锯齿。

#header{
    /* style for the older browsers, also basic info like maybe height/width */
} 

@media screen {
    #header{
        background-size : cover;
        /* Other css, not defined in the #header{} above, for modern browsers */
    } 
}

小提示：媒体查询不适用于旧版浏览器。您可以利用它来发挥自己的优势，并仅在 mediaquery 中设置现代浏览器的样式。
请记住，背景大小不起作用，所以你不能使用它