グリッド・ファンデーション - ミディアム機器
最後の章で我々は我々が使用する小型デバイスを導入.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>
<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>
<DIVクラス=「中6列"スタイル="背景色:黄色; ">
<P>このチュートリアル</ P>
</ DIV>
<DIVクラス=「中6列"スタイル="背景色:ピンク; ">
<P>このチュートリアル</ P>
</ DIV>
</ DIV>
»をお試しください