jquery - jQuery分辨率改变css

Question

我忙于响应式设计，我有这个 js 代码

$("#gradient #wrapper #camboxs .cambox:nth-child(5n)").not("#gradient #wrapper #footer .box #camboxs .combox").css("margin-right","0");

我希望当有人将浏览器的大小调整为小于 980px 或浏览器以 980px 或更小开始时，功能更改为：

$("#gradient #wrapper #camboxs .cambox:nth-child(2n)").not("#gradient #wrapper #footer .box #camboxs .combox").css("margin-right","0");

我怎样才能做到这一点？

Answer 1

你为什么要为此使用javascript？可以用纯css完成：

#gradient #wrapper #camboxs .cambox:nth-child(5n):not(#gradient #wrapper #footer .box #camboxs .combox)
{
    margin-right: 0;
}

然后使用媒体查询：

@media screen and (max-width: 980px), projection and (max-width: 980px)
{
    /* first undo the general styles */
    #gradient #wrapper #camboxs .cambox:nth-child(5n):not(#gradient #wrapper #footer .box #camboxs .combox)
    {
        margin-right: 10px; /* replace with the original margin */
    }
    #gradient #wrapper #camboxs .cambox:nth-child(2n):not(#gradient #wrapper #footer .box #camboxs .combox)
    {
        margin-right: 0;
    }
}

就像安迪建议的那样，它可以用更少的代码来完成。

而对于后备：要对窗口调整大小做出反应，请在 jQuery 中使用以下内容（未经测试）：

$(window).resize(function() {
    if ($(window).width() <= 980) {
        $("#gradient #wrapper #camboxs .cambox:nth-child(5n)").not("#gradient #wrapper #footer .box #camboxs .combox").css("margin-right","");
        $("#gradient #wrapper #camboxs .cambox:nth-child(2n)").not("#gradient #wrapper #footer .box #camboxs .combox").css("margin-right","0");
    } else {
        $("#gradient #wrapper #camboxs .cambox:nth-child(2n)").not("#gradient #wrapper #footer .box #camboxs .combox").css("margin-right","");
        $("#gradient #wrapper #camboxs .cambox:nth-child(5n)").not("#gradient #wrapper #footer .box #camboxs .combox").css("margin-right","0");
    }
});

Answer 2

我强烈建议使用媒体查询和 css3 选择器，然后使用 shim 或 polyfill。我们不应该为了一个 10 多年的浏览器而牺牲代码质量和性能。

所以，这里有一个 IE7/8 的媒体查询模拟器：

http://ie7-js.googlecode.com/svn/version/2.0%28bet​​a3%29/IE8.js

这是 IE6/7/8 的 css3 polyfill：

http://selectivizr.com/

玩得开心！

Answer 3

@media only screen 
and (min-device-width : 980px)  {
    /* Styles */

    $("#gradient #wrapper #camboxs .cambox:nth-child(2n)").not("#gradient #wrapper #footer .box #camboxs .combox").css("margin-right","0");
}