2

Susyを使おうとしているところです

レイアウトを定義しました。デスクトップ バージョンから始めて、さらに 2 つ追加する必要がありました。1 つはタブレット用、もう 1 つはスマートフォン用です。

$total-columns  : 12;
$column-width   : 4em;
$gutter-width   : 1.4em;
$grid-padding   : $gutter-width;

$phone: 4 35em;
$tablet: 35em 8 70em;

動作しているようです。私の問題は、デスクトップに表示されるはずの何かに変更を加える必要があるときに発生しますが、他の2つのいずれにも表示されないため、自分自身を繰り返していることに気づきます。

#my-div {
@include span-columns(3 omega,7);
     @include at-breakpoint($tablet) {
    display:none;
    }
 @include at-breakpoint($phone) {
    display:none;
    }
}

これをどのように単純化できますか？

4

1 に答える 1

2

その場合、susy は必要ありません。必要なのは、最大幅 70em の基本的な CSS メディアクエリだけです。at-breakpoint の唯一の理由は、メディア クエリとレイアウト変更の組み合わせを取得することです。または、「$small: 8 70em;」を追加します。そしてそれを使用します。

于 2012-06-15T07:07:02.357 に答える