1

Sassmeister のコードは次のとおりです。リンクに問題がある場合はお知らせください: http://sassmeister.com/gist/0b7c3a1897fe3bbe33db

$tablet と $bigscreen ブレークポイントがあり、最小幅の値を使用しています。

omega(2n) 値を持つ $tablet 画面のメディア クエリがあります。次に、omega(4n) 値を持つ $bigscreen の別のブレークポイントがあります。私の目標は、$bigscreen で行ごとに 3 つの写真を表示し、$tablet で 2 つの写真を表示し、小さな画面で 1 つの写真を表示することです。

コードを調べると、2n タブレットの値がまだ $bigscreen に表示されていることがわかります。これにより、すべてのブロックが収まらず、次の行にぶつかります。これは、新しいブレークポイントによってオーバーライドされるべきではありませんか?

Neat は比較的新しいので、何か提案や役立つヒントがあれば、大歓迎です! ありがとう！

4

1 に答える 1

0

オメガに問題があります。ブレークポイントの がタブレットのブレークポイントをomega(4n)上書き$bigscreenしません。omega(2n)

解決策については、 Omega Resetを確認してください。sass に mixin を含めて、次のようにします。

.picture
    +media($tablet)
        +span-columns(6) //6 of 12
        +omega(2n)
    +media($bigscreen)
        +span-columns(4) //4 of 12
        +omega(3n)
        +omega-reset(2n)

メディア クエリ内の $tablet ブレークポイントをリセットomega-reset(2n)します。私は最近同じ問題を抱えていましたが、この解決策は非常にうまく機能しました。$bigscreenomega(2n)

于 2014-06-30T20:33:25.300 に答える