更改屏幕大小时的动态 Javascript

Question

我有一个 div 类，当用户屏幕的分辨率发生变化时，我想在其中更改 css 类名。以下脚本有效：

if ( $(window).width() < 739) {     
  $("#default").toggleClass('classold classnew');
}
else {
  $("#default").toggleClass('classold classold');
}

但它有一个问题。当我打开宽度为600px的浏览器并将其更改为全屏时，移动类版本未更新。它仅在我重新加载页面时有效。

如何在不重新加载页面的情况下完成这项工作？

Answer 1

将此代码移至调整大小处理程序中：

function resize() {
    if ( $(window).width() < 739) {     
    $("#default").toggleClass('classold classnew');
    }
    else {
    $("#default").toggleClass('classold classold');
    }
}
$(window).on("resize", resize);
resize(); // call once initially

您还可以考虑使用 CSS3 媒体查询：

@media screen and (max-width: 739px) {
    /* rules for small screens */
}
@media screen and (min-width: 740px) {
    /* rules for large screens */
}