グリッド・ファンデーション - ミディアム機器2024 年の最新の入門チュートリアル。このコースでは 中規模の上で使用するためのタイトデバイス, について学習できます。
最後の章で我々は我々が使用する小型デバイスを導入.small-*
クラスは25%/ 75%のグリッド比を設定するには:
<div class="small-3 columns">jaja</div> <div class="small-9 columns">jaja</div>
我々は50%/ 50%の比率をお勧めします中型デバイスで。
ヒント:画面サイズは中型機器に定義されている40.0625em
する64.0624em
の間。
中型機器.medium-*
カテゴリ。
今、私たちは、ミッドレンジ・デバイス上の2つを追加します。
<div class="small-3 medium-6 columns">jaja</div> <div class="small-9 medium-6 columns">jaja</div>
?例では比率が25%と75%であった2つの列を設定する(財団は、モバイル第一です:指定されていない場合は、大規模な設備が.smallクラスコードを継承します):
小型デバイス25%/ 75%(割合.small-3
及び.small-9
)。 しかし、使用される中型の機器の割合が(〜50%/ 50%であった.medium-6
と.medium-6
)。
注:列の数は12まで追加することを確実にするために! |
次の例で、我々は指定.medium-6
クラス(ありません.small-*
)。 これは、50%/ 50%の中規模または大規模装備率であることを示します。 しかし、小型のデバイスに水平(100%の幅)に積層。