javascript - 更改屏幕大小时的动态Javascript

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

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

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

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

最佳答案

将此代码移到调整大小处理程序中:

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 */
}

关于javascript - 更改屏幕大小时的动态Javascript，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30710114/