/ / Foundation 4 Media Query - zurb-foundation

Fundacja 4 Media Query - zurb-foundation

Jestem początkującym w projektowaniu CSS.

Używam Fundacji 4 (Zurb) do zaprojektowania pierwszego końca mojego projektu w college'u. Nauczyłem się, że Fundacja 4 ma charakter responsywny, aby projektować responsywny projekt.

Czy istnieje potrzeba kwerendy CSS Media z Fundacją 4? Jeśli tak, to jak mogę z niego skorzystać, jakie korzyści mogę z tego wyciągnąć?

Odpowiedzi:

1 dla odpowiedzi № 1

Powinieneś przeczytać sekcję "Media-Queries" i "The Grid" w dokumentach: http://foundation.zurb.com/docs/

<div class="row">
<div id="block" class="small-2 large-8 columns">Content</div>
</div>

Ten kod spowoduje, że "#block" ma szerokość 2 kolumndla każdego rozmiaru ekranu ze względu na klasę "small-2". Klasa "dużej-8" nadpisuje to zachowanie na szerokości okna równej 768px i wyżej, dzięki czemu ma 8 kolumn szerokości na dużych ekranach.

Aby uprościć ten kod, "#block" będzie miał szerokość 2 kolumn na ekranach telefonów komórkowych i 8 kolumnach na ekranach pulpitu.

Jeśli potrzebujesz wsparcia IE6-8, musisz również użyć Respond.js: https://github.com/scottjehl/Respond