1

我有一个正在开发的网站，它使用网格系统 在 IE7 中，当调整窗口大小时，一列“弹出”到另一列下方。这不是一个大问题，但由于顶部/左侧没有边距，因此布局相当不可读。

那么如何将课程应用于

<div>

只有当窗口（视口？）被调整到低于某个宽度时？

例如

width > 500px = class="smallerwindow"

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

我有 jQuery、modernizr 等。

谢谢，

哈雷

4

3 回答 3

2

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

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

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

注意：建议在 head 中包含 respond.js，因为这会影响 dom 渲染

然后按如下方式定义您的 CSS：

.myWindow { width: 500px; }

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

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

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

于 2012-10-30T14:49:39.127 回答
1

我会做这样的事情..

$(window).resize(function() {

    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 有类删除它。

于 2012-10-30T14:48:07.250 回答
0

jQuery：

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

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

<div id='myDiv'> </div>
于 2012-10-30T14:47:49.900 回答