Question

尝试编写一个小脚本，根据窗口添加/删除类，

任何帮助将不胜感激。

<script type="text/javascript">
  $(document).ready( function() {
    if ($(window).width() < 500) {
     $('.single-post-rating').removeClass('col-xs-3');
     $('.single-post-rating').addClass('col-xs-12');
     $('.guide-excerpt').removeClass('col-xs-9');
     $('.guide-excerpt').addClass('col-xs-12');
    }
    else {
     $('.single-post-rating').addClass('col-xs-3');
     $('.single-post-rating').removeClass('col-xs-12');
     $('.guide-excerpt').addClass('col-xs-9');
     $('.guide-excerpt').removeClass('col-xs-12');
    }
  });
</script>

Answer 1

我认为你是在视口宽度之后。

您可以使用

进行访问

var viewPortWidth = document.documentElement.clientWidth;

顺便说一句，您可以通过单独的CSS媒体查询完成许多良好的响应式布局。

Answer 2

如果您想继续这条路径，这是管理窗口宽度的最佳解决方案之一：添加一个带有min-with属性的控件css类，并将该类分配给容器

的CSS：

.mediaquerycontrol {
    min-width: 0px;
}

@media (min-width: 992px) {

    .mediaquerycontrol {
        min-width: 992px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {

    .mediaquerycontrol {
        min-width: 768px;
    }
}
@media (min-width: 1200px) {

    .mediaquerycontrol {
        min-width: 1200px;
    }
}

HTML：

<body>
  <div class="container mediaquerycontrol">
...

的javascript：

<script type="text/javascript">
  $(document).ready( function() {
    var pageWidth = parseInt($(".mediaquerycontrol").css("min-width").replace(/[^-\d\.]/g, ''))

    if (pageWidth  < 500) {
     $('.single-post-rating').removeClass('col-xs-3').addClass('col-xs-12');
     $('.guide-excerpt').removeClass('col-xs-9').addClass('col-xs-12');
    }
    else {
     $('.single-post-rating').addClass('col-xs-3').removeClass('col-xs-12');
     $('.guide-excerpt').addClass('col-xs-9').removeClass('col-xs-12');
    }
  });
</script>

但我的建议是使用bootstrap的功能，如果你需要更小的列，那么你可以默认增加列数（例如，如果你使用2.3.2版本，则从12增加到24）

http://getbootstrap.com/2.3.2/customize.html

JQuery在窗口宽度上添加/删除类

2 个答案: