javascript - window.resize 使用 jquery

Question

这是我的代码最后一个 420 当我调整窗口宽度 420 在此宽度 768 时，条件未执行执行任何人都可以建议我的问题。我正在尝试在调整窗口大小时添加 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.ready 之后应用此逻辑，您可以使用下一个代码(简单来说就是触发调整大小事件): https://jsfiddle.net/dqm634ro/