jquery - 在窗口调整大小时删除和添加类

Question

我正在使用 Bootstrap 模态框，我希望模态框在大型桌面上具有 750 像素的宽度。当我调整窗口大小并使其变小时，模态不再响应，因此我向模态添加了一个类并给它 750px 宽度，当窗口小于 800 时我删除了这个类。问题是一旦类被删除，它仍然被删除，那么当窗口大于 800 时，如何再次添加类？到目前为止我有这个

function checkWidth() {
  if ($(window).width() < 800) {
    $('div').removeClass('modal-width');
  }

}

$(window).resize(checkWidth);

Answer 1

除了使用 JavaScript，您还可以使用 CSS media queries 来完成此操作:

@media screen and (min-device-width: 800px){
  .modal{
      width: 750px;
   }
}

此规则仅在浏览器宽度为 800px 或更大时应用。