Question

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

那么如何将类应用于

<div>

当窗口（视口？）调整到一定宽度以下时

仅？

例如

width > 500px = class="smallerwindow"

然后我可以适当地设定该课程的风格。

我有jQuery，modernizr等。

谢谢，

哈利

Answer 1

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

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

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

注意：建议在头部包含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; }
}

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

Answer 2

我会做这样的事情......

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

Answer 3

jQuery的：

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

这将检查视口宽度，并重置

的当前“class”属性

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

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

3 个答案: