Siatka Fundacja - Średni Wyposażenie
W ostatnim rozdziale wprowadziliśmy małych urządzeń używamy .small-* klasa ustawić współczynnik siatki o 25% / 75%:
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
Na średniej wielkości urządzenia, które zalecamy stosunku 50% / 50%.
Wskazówka: Rozmiar ekranu jest zdefiniowana w średnich sprzętu 40.0625em do 64.0624em pomiędzy.
Sprzęt średnich .medium-* kategoria.
Teraz dodamy dwa na urządzeniu średniotonowy:
<div class="small-3 medium-6 columns">....</div> <div class="small-9 medium-6 columns">....</div>
? Na przykład ustawić dwie kolumny, wskaźnik ten wynosił 25% i 75% (Fundacja jest ruchoma pierwsza: Jeśli nie podano, duży sprzęt będzie dziedziczyć .small kod klasy):
Udział małych urządzeń% 25/75% ( .small-3 i .small-9 ). Jednakże, część urządzenia średniego stosowanego było% 50/50% ( .medium-6 i .medium-6 ).
Przykłady
<Div class = "small-3 średnio-6 Kolumny" style = "background-color: yellow;">
<P> Ten poradnik </ p>
</ Div>
<Div class = "small-9 średnie-6 Kolumny" style = "background-color: różowy;">
<P> Ten poradnik </ p>
</ Div>
</ Div>
Spróbuj »
 | Uwaga: Aby upewnić się, że liczba kolumn sumują się do 12! |
|---|
Szczelne urządzenie do stosowania w średnich i
Poniższy przykład, możemy określić .medium-6 klasy (nie .small-* ). Oznacza to, że w średnim lub dużym stosunkiem sprzętu w wysokości 50% / 50%. Ale w małym urządzeniu poziomo ułożone (szerokość 100%):
Przykłady
<Div class = "medium-6 Kolumny" style = "background-color: yellow;">
<P> Ten poradnik </ p>
</ Div>
<Div class = "medium-6 Kolumny" style = "background-color: różowy;">
<P> Ten poradnik </ p>
</ Div>
</ Div>
Spróbuj »