jQuery分辨率更改CSS

Question

I am bussy with a responive design and i have this js code

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

I want when somewone resize there brower smaller then 980px or the browser starts on 980px or smaller then the function change to:

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

How can i do this?

Answer 1

Why are you using javascript for this? Can be done with pure css:

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

And then use media queries:

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

Like Andy suggested, it could be done with way less code.

And for the fallback: To react on window resize, use the following with jQuery (untested):

$(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

I'd strongly advise using media queries and css3 selectors and then using a shim or polyfill. We shouldn't sacrifice code quality and performance for the sake of a 10+ year old browser.

So, here's a media query emulator for IE7/8:

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

and here's a css3 polyfill for IE6/7/8:

http://selectivizr.com/

Have fun!

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