CSS/Javascript：根据窗口宽度应用Javascript

我有一个我正在开发的网站，它使用IE7中的网格系统，当窗口调整大小时，一列“弹出”到另一列下面。这不是一个大问题，但由于左上角没有空白，布局相当不可读

那么，如何将类应用于

<div>

然后，我可以适当地设置该类的样式

我有jQuery、Modernizer等

谢谢

哈雷

jQuery：

if ($(window).width() > 500) {
   $("#myDiv").attr("class","smallerWindow");
}

这将检查视口宽度，并重置当前的“类”属性

<div id='myDiv'> </div>

---

我会这样做

$(window).resize(function() {

    if((window).width() > 500 && !$("div").hasClass("smallerwindow")){

        $("div").addClass("smallerwindow");

    } else if((window).width() < 500 && $("div").hasClass("smallerwindow")) {

        $("div").removeClass("smallerwindow");

    }

});

$（窗口）。调整大小（函数（）{
if（（window）.width（）>500&&！$（“div”）.hasClass（“smallerwindow”））{
$（“div”）.addClass（“smallerwindow”）；
}else if（（window）.width（）<500&&$（“div”）.hasClass（“smallerwindow”））{
$（“div”）.removeClass（“smallerwindow”）；
}
});

---

检查窗口大小是否大于500，如果div没有类添加它，否则如果窗口大小小于500，div让类删除它。

根据我上面的评论，您可以使用启用IE6-8的媒体查询支持

有条件地包括respond.js脚本：

<!--[if lte IE 8]>
<script type="text/javascript" src="~/Scripts/respond.min.js"></script>
<![endif]-->

---

只是一些示例视口大小和宽度；相应地调整。

您可能想看看Respond.js（），它支持IE6-8.0的媒体查询！已经是一个响应网格，所以只需要一个拷贝，拷贝粘贴。。。谢谢，但我使用了下面的respond.js解决方案。我相信这会再次发挥作用。：）这是一个更“响应性设计”和更好的架构解决方案谢谢。。。看起来很健壮。不过还是使用了respond.js。

<!--[if lte IE 8]>
<script type="text/javascript" src="~/Scripts/respond.min.js"></script>
<![endif]-->

.myWindow { width: 500px; }

@media (min-width:1200px) {
    .myWindow { width: 400px; }
}

@media  (min-width: 768px) and (max-width:979px) {
    .myWindow { width: 300px; }
}