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

我有一个网站，我正在开发，使用网格系统在IE7中，当窗口调整大小时，一列“弹出”在另一个下面。这不是一个大问题，但由于顶部/左侧没有余量，布局相当难以理解。CSS/JavaScript：根据窗口宽度应用JavaScript

所以，我怎么能应用类的

<div>

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

如

width > 500px = class="smallerwindow"

我那么可以适当风格类。

我有jQuery的，Modernizr的等

谢谢，

哈利

来源

2012-10-30 harley_woop

你可能想看看Respond.js（https://github.com/scottjehl/Respond），它支持IE6-8的媒体查询。 –

根据我上面的评论，您可以使用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; } 
}

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

来源

2012-10-30 14:49:39

Sorted！已经是一个响应式网格，所以只需要一个_copy，复制粘贴_...谢谢 –

的jQuery：

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

此检查视口宽度，并且复位的当前 'class' 属性

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

来源

2012-10-30 14:47:49 andy

谢谢，但我使用了下面的respond.js解决方案。我肯定会再次有用。 :) –

这是一个更“响应式设计”和更好的体系结构解决方案 – andy

我会做这样的事情..

$(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-30 14:48:07 Wez

谢谢......看起来很健壮。尽管使用respond.js。 –

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

回答

相关问题