javascript - 如何使用 jQuery 检测屏幕大小变化的对象样式？

Question

我是jQuery的初学者！首先，很抱歉我的英文不好，但我会尽量完整地描述我的问题。谢谢你。

现在我想练习在浏览器低于 768px 时使用 jQuery 更改框的颜色。在网上查了这个写法，还是达不到效果。你能帮我检查一下语法有没有问题吗？

谢谢收看。`

$(document).ready(function() {
  $(window).resize(function() {
    let width = $(window).width();
    if (width < 768) {
      $('.box').css('background-color', 'red');
    }
  });
});

.container {
  width: 100%;
  height: 600px;
  background-color: #ccc;
  border: 1px solid #222;
}

.box {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #8ec06c;
}

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

`

标签： javascriptjquerycss