Yayasan Grid - Peralatan Medium
Bab terakhir kami memperkenalkan perangkat kecil yang kita gunakan .small-* kelas untuk mengatur rasio grid 25% / 75%:
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
Pada menengah perangkat yang kami sarankan rasio 50% / 50%.
Tip: Ukuran layar didefinisikan dalam menengah peralatan 40.0625em untuk 64.0624em antara.
peralatan berukuran menengah- .medium-* kategori.
Sekarang kita tambahkan dua pada perangkat midrange:
<div class="small-3 medium-6 columns">....</div> <div class="small-9 medium-6 columns">....</div>
? Dalam contoh mendirikan dua kolom, rasio adalah 25% dan 75% (Foundation adalah ponsel pertama: Jika tidak ditentukan, peralatan besar akan mewarisi .small kode kelas):
Proporsi perangkat kecil% 25/75% ( .small-3 dan .small-9 ). Namun, proporsi peralatan menengah digunakan adalah% 50/50% ( .medium-6 dan .medium-6 ).
contoh
<Class Div = "kecil-3 menengah-6 kolom" style = "background-color: yellow;">
<P> Tutorial ini </ p>
</ Div>
<Div class = "kecil-9 menengah-6 kolom" style = "background-color: pink;">
<P> Tutorial ini </ p>
</ Div>
</ Div>
Coba »
 | Catatan: Untuk memastikan bahwa jumlah kolom menambahkan hingga 12! |
|---|
perangkat ketat untuk digunakan pada menengah
Contoh berikut, kita tentukan .medium-6 kelas (tidak .small-* ). Hal ini menunjukkan bahwa rasio peralatan menengah atau besar 50% / 50%. Tapi pada perangkat kecil horizontal ditumpuk (100% lebar):
contoh
<Class Div = "menengah-6 kolom" style = "background-color: yellow;">
<P> Tutorial ini </ p>
</ Div>
<Class Div = "menengah-6 kolom" style = "background-color: pink;">
<P> Tutorial ini </ p>
</ Div>
</ Div>
Coba »