Foundation グリッド - 中型デバイス

Foundation のグリッド例：中型デバイス

前の章では、小型デバイス用のクラスを持つグリッドの例を提示しました。2 つの div（カラム）を使用して、 25%/75% に分割しました：

しかし、中型デバイス上のデザインは、50%/50% の分割などの方が良いかもしれません。

チップ: 中型デバイスは、40.0625em から 64.0624em までの 画面幅を持つものとして定義されています。

中型デバイスには、.medium-* クラスを使用します。

中型デバイスに、次のカラム幅を追加します：

例の説明

小型デバイス用には、25%/75% の分割 (.small-3 と .small-9) を使用しました。 しかし、中型デバイス用には、50%/50% の分割 (.medium-6 と .medium-6) を使用します - 効果を確認するために、ブラウザウィンドウのサイズを変更してください：

	注: 合計は、いつも 12 になることを確認してください！

medium だけの使用

下の例では、.small-* 無しに .medium-6 クラスだけを指定します。 クラスはスケールアップするので、これは、中型と大型デバイスで 50%/50% の分割になることを意味します。 しかし、小型デバイスでは縦に（100％ 幅）スタックされます：

次の章では、大型デバイス用に、異なる分割パーセントの追加方法を示します。