0

バーボン ニート グリッドをテストし、実際にモバイル ファースト アプローチ グリッドを試してみます。私の構造は次のようになります：

#general
    #header
            .headHaut
            .headBas
    #content-global
        #left-content
        #content-inner 
        #right-content
    #footer

私のグリッド設定:

$mobile-size:em(320);
$tablet-size:em(720);
$desktop-size:em(1000);

// Bourbon Neat Breakpoints - règle le nombre de colonnes
$mobile: new-breakpoint(min-width $mobile-size 4);
$tablet: new-breakpoint(min-width $tablet-size 8);
$desktop: new-breakpoint(min-width $desktop-size 12);

私のscss：

body #general{
    //Approche mobile-first,réglage pour mobile
    @include outer-container;
    padding-top: 2em;
    background: transparent;

    #header{@include span-columns(4);}
    #content-global{@include span-columns(2);}
    #left-content{}
    #content-inner{}
    #right-content{}
    #footer{@include span-columns(4);
            @include background-size;}

    @include breakpoint ($desktop) {/*    //Dimensions pour les pc*/

        background: transparent;
        #header{@include span-columns(12);}
        #content-global{@include span-columns(12);}
        #left-content{@include span-columns(2 of 12);}
        #content-inner{@include span-columns(8 of 12);}
        #right-content{@include span-columns(2 of 12);}
        #footer{@include span-columns(12);
                @include background-size(auto);
        }

    }
    @include breakpoint($tablet) {/*   //Dimensions pour les tablettes*/
    }
}

たとえば、私はブレークポイントに応じて背景色を変更し、PC 画面では、色はモバイルのものによって上書きされます..しかし、列番号は正しいものです...奇妙です。

手伝ってくれてありがとう

EDIT1: モバイルの設定を適用するには、ブレークポイントを指定する必要があります。

body #general{
    //Approche mobile-first,réglage pour mobile
    @include outer-container;
    padding-top: 2em;
    background: transparent;
@include breakpoint ($mobile){}
    #header{@include span-columns(4);}
    #content-global{@include span-columns(2);}
    #left-content{}
    #content-inner{}
    #right-content{}
    #footer{@include span-columns(4);
            @include background-size;}

    @include breakpoint ($desktop) {/*    //Dimensions pour les pc*/


        background: transparent;
        #header{@include span-columns(12);}
        #content-global{@include span-columns(12);}
        #left-content{@include span-columns(2 of 12);}
        #content-inner{@include span-columns(8 of 12);}
        #right-content{@include span-columns(2 of 12);}
        #footer{@include span-columns(12);
                @include background-size(auto);
        }

    }
    @include breakpoint($tablet) {/*   //Dimensions pour les tablettes*/


        #header{}
        #content-global{}
        #left-content{}
        #content-inner{}
        #right-content{}
        #footer{}

    }
}

しかし、ページの内部部分で問題が発生します。コンテナを指定する必要がありますか、それとも複数の列にまたがるミックスインで十分ですか?

4

1 に答える 1

0

@import 'neat-helpers';ブレークポイントを宣言する前に、確認する必要があります。こちらの開始手順を参照してください: https://github.com/thoughtbot/neat#getting-started

于 2013-12-06T20:19:57.620 に答える