javascript - 更改屏幕大小时的动态 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 */
}