3

2 つの異なるレイアウトを作成しています。1 つは横向き用、もう 1 つは縦向き用です。横長のレイアウトには、幅の広い列があります。これを行うために、新しいバージョンの Susy を使用しています。

これは私のコードです:

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
$total-columns  : 7;
$column-width   : 10.900em;
$gutter-width   : 2.80em;
$grid-padding   : 4.00em;

$show-grid-backgrounds  : true;
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 0px) 
and (max-device-width : 768px) 
and (orientation : portrait) {
$total-columns  : 7;
  $column-width: 7.2em;
  $gutter-width: 2.8em;

  .container {
    @include container;
  }

}

しかし、うまくいきません。列は同じサイズのままです (小さい縦サイズ)。どうすればこれを修正できますか?

私のページの他のレスポンシブ コードは機能しますが、機能しないのはグリッドだけです!

Susy Documentationにはレスポンシブ グリッドに関するセクション全体がありますが、従うのは少し複雑であり、向きについては説明していません。以前に尋ねたこの質問もありますが、解決策は機能しません (解決策が古い Susy バージョン用だったためだと思います)。

提供できるヘルプをありがとう！

4

1 に答える 1

2

Susy は、主に列の幅をパーセンテージで設定することを目的としています。これにより、ビューポートまたは外側のコンテナーのサイズに対して列が柔軟になります。この設定を使用して、$container-style: fluid;Susy に幅と余白にパーセンテージを使用するように指示します。列の数を変更するのではないので (単に幅を変更したいだけです)、幅を柔軟にします。その後、メディア クエリを変更する必要はほとんどありません。

これは、12 列のグリッドの基本設定です。 

@import "susy";
$total-columns: 12; // Evenly divisible by 2, 3, 4 and 6
$column-width: 60px;
$gutter-width: 20px;
$grid-padding: $gutter-width;
$container-style: fluid;

これらの設定を_base.scss file and never change it – instead, I apply@include span-columns( X )` でコンテナに保持し、さまざまなメディアクエリのブレークポイントで使用する列の数を調整します。

具体的に iPad をターゲットにすることは、将来に配慮したものでも、レスポンシブ Web デザインの意図でもありませんが、理由があると確信しています。このコメントは、このフォーラムを読んでいる RWD 初心者向けのものでした。

デバイス スニッフィングを改善するには、ユーザー エージェント文字列を確認する必要がある場合があります。この質問にもいくつかの良いアイデアがあります: iPad (またはせいぜい 1024x768 モバイル デバイス) のみを検出するための信頼できるメディア クエリ

于 2013-02-12T20:43:17.843 に答える