javascript - CSS/JavaScript : Apply javascript according to window width

Question

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

那么我怎样才能将一个类应用到一个

<div>

仅当窗口(视口(viewport)？)的大小调整到特定宽度以下时？

例如

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]-->

注意:建议在 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; }
}

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