Question

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

这是我目前的剧本：

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

一旦开始调整大小，这就有效，但是一旦你达到768以下，它就不会删除背景大小，初始状态也没有背景大小。有任何想法吗？谢谢！

Answer 1

你的答案几乎是正确的。您需要做的就是添加其他内容。

$(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和mediaqueries。 这比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 */
    } 
}

小注意：Mediaqueries不适用于旧版浏览器。您可以使用此优势，仅在mediaquery中为现代浏览器设置样式请记住，背景大小不起作用，所以你不能使用

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

2 个答案: