Question

我想用jquery检查窗口大小，并根据不同的分辨率，我想改变一些CSS。这是基本结构：

$(document).ready(function(){

function checkWidth() {
    var windowSize = $(window).width();

    if ( windowSize > 600 ) {
    console.log('600px - 768px');

    } else if ( windowSize > 450 ) {
    console.log('450px - 600px' );

    } else if ( windowSize > 300 ) {
    console.log('300px -450px' );
    }

}

// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);

});

问题是，我想使用windowSize（300px-450px，450px-600px，600px-768px）三个条件。我不知道情况。

Answer 1

试试这个

   function checkWidth() {
      var windowSize = $(window).width();

      if ( windowSize > 600 && windowSize <= 768 ) {
        console.log('600px - 768px');

      } else if ( windowSize > 450 && windowSize <= 600) {
        console.log('450px - 600px' );

      } else if ( windowSize > 300 && windowSize <= 450) {
      console.log('300px -450px' );
      }
}

Answer 2

你可以这样做：

＆＃13;

checkSize();

function checkSize(){
var windowWidth = $(window).width(); 

if ( windowWidth >= 600 && windowWidth <= 768 ) {
        console.log('600px to 768px');

      } else if ( windowWidth >= 450 && windowWidth <= 600) {
        console.log('450px to 600px' );

      } else if ( windowWidth >= 300 && windowWidth <= 450) {
          console.log('300px to 450px' );
      }
}
        
$(window).resize(function() {
   checkSize();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

＆＃13;

检查Fiddle.

Answer 3

为什么不使用CSS媒体查询？

@media (min-width: 300px) and (max-width: 449px) {
    /* your css properties */
}
@media(min-width: 300px) and (max-width: 599px) {
    /* your css properties */
}
@media(min-width: 300px) and (max-width: 768px) {
    /* your css properties */
}

Answer 4

使用以下代码，根据不同的条件添加你的东西。

$(function() {
    var windowWidth = $(window).width();    
    if(windowWidth == 300 || windowWidth == 450) {
       // add stuff
    }
    else if(windowWidth == 450 || windowWidth == 600) {
       // add stuff
    }
    else if(windowWidth == 600 || windowWidth == 768) {
       // add stuff
    }       
})

如何使用jquery检测窗口大小

4 个答案: