jQuery的分辨率改变CSS

我布西与responive设计，我有这个js代码jQuery的分辨率改变CSS

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

我想在somewone调整有布劳尔较小然后980px或浏览器980px或更小，则函数变化开始：

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

我该怎么做？

来源

2013-03-18 Maanstraat

示例代码：http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css – JasonWoof 2013-03-18 20:21:31

您的选择器真的很复杂且过于冗长。你为什么不使用$（'＃camboxs .cambox：n-child（5n）'）。 ID是独一无二的，除了使其更快以外，它没有什么不同。 – Andy 2013-03-18 20:21:57

@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"); 
}

来源

2013-03-18 20:20:34 user2415300

你为什么用这个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"); 
    } 
});

来源

2013-03-18 20:21:04

因为较旧的IE版本不会接受css中的第n个孩子...... – Maanstraat 2013-03-18 20:22:50

@Maanstraat，我明白了。当然，这是真的。媒体查询的方式也不兼容。但也许你可以使用这个，并有一些回退IE浏览器。只是我的意见：只要你没有js就可以做点什么，那就做吧。 ;-) – 2013-03-18 20:26:19

但是，我仍然不知道我怎么能为IE做... – Maanstraat 2013-03-18 20:29:29

我强烈建议您使用媒体查询和CSS3选择器，然后使用垫片或填充工具。为了使用10年以上的浏览器，我们不应该牺牲代码质量和性能。

所以，在这里是为IE7/8媒体查询模拟器：

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

，这里是为IE6/7/8 CSS3填充工具：

http://selectivizr.com/

玩得开心！

来源

2013-03-18 20:37:30

嗨，这对每一次都很好，但是当我在IE 8中启动或调整浏览器的大小时，它不会更改为移动版式。（Chrome和所有其他工作正常）你知道我可以解决这个问题吗？ – Maanstraat 2013-03-18 22:10:52

jQuery的分辨率改变CSS

回答

相关问题