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;
    }
}

正如 Andy 所建议的，它可以用更少的代码来完成。

对于回退:要对窗口调整大小使用react，请将以下内容与 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");
    }
});