7

バーボンニートで次のことができることを私は知っています：

$mobile: new-breakpoint(max-width: 320px);
$tablet: new-breakpoint(max-width:760px min-width:321px);
$desktop: new-breakpoint(min-width: 761px);

次に、次のようなことができます。

@include media($mobile) {
    // some styling
}

それはうまくいきます。次に、モバイルとタブレットに影響するスタイルを追加する必要があります。モバイルとタブレットのブレークポイントの結合を探しています。

//desired behavior 
//I know this is not available. Just made up
@include media($mobile, $tablet) {
    // some styling.
    // this should be applied to mobile and tablet
}
4

3 に答える 3

3

特定のスタイルでモバイルとタブレットをターゲットにしたい場合は、新しいブレークポイントを作成するのが最善の方法だと思います。

$mobile-to-tablet: new-breakpoint(max-width:760px min-width:321px $cols);

そして、このブレークポイントの下にすべての特定の css を追加します。

于 2015-03-30T11:19:11.667 に答える
0

これはバーボン関連の回答ではありませんが、とにかく.

あなたが望むものを正確に実行するCompass拡張機能があります: Breakpoint Slicer。

次のようにブレークポイントを設定するだけです。

$slicer-breakpoints: 0 320px 760px;
// Slices:           | 1 |  2  |  3  →

そして、短いat、from、toおよびbetweenmixin を使用して、ブレークポイント (「スライス」と呼ばれる) 間のギャップに対処するだけです。たとえば、メディアクエリ@include at(2)を設定します。min-width: 320px, max-width: 760px

多数の強力な Compass 拡張機能のエコシステムがあるため、Bourbon に夢中になる理由はまったくありません。強力なセマンティック グリッドについては、Singularityを使用します。これは、 Breakpointおよび Breakpoint Slicer とうまく統合されます。

于 2013-06-13T20:06:35.927 に答える