0

私は応答性の高いデザインで忙しく、この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");

これどうやってするの？

4

3 に答える 3

2

なぜこれに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が提案したように、それははるかに少ないコードで実行できます。

フォールバックの場合：ウィンドウのサイズ変更に対応するには、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-18T20:21:04.150 に答える
1

メディア クエリと css3 セレクターを使用してから、シムまたはポリフィルを使用することを強くお勧めします。10 年以上前のブラウザーのためにコードの品質とパフォーマンスを犠牲にするべきではありません。

IE7/8 用のメディア クエリ エミュレータは次のとおりです。

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

IE6/7/8 用の css3 ポリフィルは次のとおりです。

http://selectivizr.com/

楽しむ！

于 2013-03-18T20:37:30.167 に答える
0 
@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-18T20:20:34.103 に答える