Latest web development tutorials

グリッド・ファンデーション - ミディアム機器

最後の章で我々は我々が使用する小型デバイスを導入.small-*クラスは25%/ 75%のグリッド比を設定するには:

<div class="small-3 columns">....</div>
<div class="small-9 columns">....</div>

我々は50%/ 50%の比率をお勧めします中型デバイスで。

ヒント:画面サイズは中型機器に定義されている40.0625emする64.0624emの間。

中型機器.medium-*カテゴリ。

今、私たちは、ミッドレンジ・デバイス上の2つを追加します。

<div class="small-3 medium-6 columns">....</div>
<div class="small-9 medium-6 columns">....</div>

?例では比率が25%と75%であった2つの列を設定する(財団は、モバイル第一です:指定されていない場合は、大規模な設備が.smallクラスコードを継承します):

小型デバイス25%/ 75%(割合.small-3及び.small-9 )。 しかし、使用される中型の機器の割合が(〜50%/ 50%であった.medium-6.medium-6 )。

<DIVクラス = "行">
<DIVクラス= "小-3培地-6列"スタイル= "背景色:黄色;">
<P>このチュートリアル</ P>
</ DIV>
<DIV CLASS = "小9中・6列"スタイル= "背景色:ピンク;">
<P>このチュートリアル</ P>
</ DIV>
</ DIV>

»をお試しください
ノート 注:列の数は12まで追加することを確実にするために!

中規模の上で使用するためのタイトデバイス

次の例で、我々は指定.medium-6クラス(ありません.small-* )。 これは、50%/ 50%の中規模または大規模装備率であることを示します。 しかし、小型のデバイスに水平(100%の幅)に積層。

<DIVクラス = "行">
<DIVクラス=「中6列"スタイル="背景色:黄色; ">
<P>このチュートリアル</ P>
</ DIV>
<DIVクラス=「中6列"スタイル="背景色:ピンク; ">
<P>このチュートリアル</ P>
</ DIV>
</ DIV>

»をお試しください