Question

当我在此宽度768上调整窗口宽度420的大小时，这是我的代码的最后一个420条件未执行，任何人都可能建议我这可能是问题所在。我正在尝试在窗口调整大小上添加CSS。

$(window).on('resize', function(){
  var win = $(window); //this = window
  if (win.width() > 425) { 
    $('.box').css('background-color','green');
  }
  if (win.width() > 768) { 
    $('.box').css('background-color','blue');
  }
  if (win.width() > 1024) { 
    $('.box').css('background-color','red');
  }

});

.box {
  width: 500px;
  height: 500px;
  background-color: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="box"></div>

Answer 1

CSS：

@media (min-width: 425px) {
    .box {
        background-color: green;
    }
}

@media (min-width: 768px) {
    .box {
        background-color: blue;
    }
}

@media (min-width: 1024px) {
    .box {
        background-color: red;
    }
}

JS：

此外，如果您想使用JS（jQuery）并在window.read之后应用此逻辑，则可以使用下一个代码（只需几句话即可触发resize事件）： https://jsfiddle.net/dqm634ro/

Answer 2

更好地使用CSS Media查询对其进行存档，但如果您确实需要，请尝试一下。

 $(window).on('resize', function(){
  var win = $(window); //this = window
  if (win.width() >= 425 && win.width() < 768) { 
    $('.box').css('background-color','green');
  }
  else if  (win.width() >= 768 && win.width() < 1024) { 
    $('.box').css('background-color','blue');
  }
  else if  (win.width() >= 1024) { 
    $('.box').css('background-color','red');
  }
  else{
   //write here it will be execute when size is less then 425
  }

});

使用jQuery window.resize

2 个答案: