Question

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

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

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

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

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

Answer 2

您可以使用CSS

简单地实现它

<style>
@media (max-width: 600px) {
    /* your code */
}
@media (min-width: 740px) {
    /* your code */
}
</style>

CSS media queries

Answer 3

为什么您的脚本不起作用

您的if-else语句将在网站加载时调用，然后再也不会被触及。为了使其正常工作，您必须在调整大小事件时触发它。

为什么不应该使用此解决方案

只要你能用CSS解决问题，你应该避免使用Javascript。一个原因是性能，但也有边缘情况，使用Javascript而不是CSS可能导致奇怪的行为。例如，当您使用浏览器的最大化功能并在此之后获得新的窗口大小时，可能会导致错误的结果。

如何解决问题

@media screen and (max-width: 739px) {
    #default{
        //css rules for smaller screens
    }
}
@media screen and (min-width: 740px) {
    #default{
        //css rules for larger screens
    }
}

Answer 4

你尝试过这样的事情，但是除了附加到resize事件，还要附加到加载？

同样关注媒体查询的人也是对的，但对JS而言应该是这样的：

Exception Details: System.ArgumentOutOfRangeException: 'DocStatusDropDown' has a SelectedValue which is invalid because it does not exist in the list of items.
Parameter name: value

Source Error: 


Line 194:        gvMainGrid.Columns[8].Visible = false;
Line 195:        gvMainGrid.AllowPaging = false;
Line 196:        gvMainGrid.DataBind();
Line 197:        Response.ClearContent();
Line 198:        Response.AppendHeader("content-disposition", "attachment; filename=MissingDocuments.xls");

希望这适合你=）

更改屏幕尺寸时动态Javascript

4 个答案: