1

私はスージーでレスポンシブデザインに比較的慣れていません。グリッドを設定し、at-breakpoint（）を使用して、最初にブラウザウィンドウのサイズを変更しながらページをテストし、次に実際のモバイルデバイス（電話とタブレット）でテストすることで、ページを完全にレスポンシブにしました。 。メディアクエリに追加の方向ルール（方向：横向き）が必要なため、iPadで問題が発生しました。ここでの回避策は何ですか、それをブレークポイントルールに含める方法はありますか、それともこの場合のために別のメディアクエリを作成する必要がありますか？

これが私のグリッド設定です：

$total-columns: 4;
$column-width: 60px;
$gutter-width: 20px;
$grid-padding: $gutter-width/2;

// alternative layout breakpoints

$tablet-small: 6;
$tablet: 8;
$computer: 12;

そして、サイドバーとページ本文を扱うときは、最初にそれらをブロック要素として表示してページ全体を水平方向に塗りつぶし、ブレークポイントの後、次のように列として表示します。

#sidebar {
    @include at-breakpoint($computer) {
        @include span-columns(3, $computer);
    }
} // sidebar

#page-body {
    @include at-breakpoint($computer) {
        @include span-columns(9 omega, $computer);
    }
} // page-body

ブレークポイントの変数を保持し、方向ルールを追加するようにコードを変更するにはどうすればよいですか？ありがとう！

4

2 に答える 2

1

特定のデバイスをターゲットにしたい場合は、幅を指定する方が良いと思います。

だから$computer: 12;多分する代わりに$computer: 48em 12;

にmin-width: 48em;達すると、レイアウトが12列のグリッドに変更されます。

于 2013-03-26T05:19:06.507 に答える
0

このようなものが機能する必要があります：

$device-lrg-landscape: max-device-width 480px, orientation landscape


@include breakpoint($device-lrg-landscape)
于 2013-03-27T18:52:25.043 に答える