Foundation 4 Media Query

Question

Я начинаю рисовать в CSS-дизайне.

Я использую Foundation 4 (Zurb) для дизайна переднего конца моего проекта колледжа. Я узнал, что Фонд 4 реагирует на природу, чтобы разработать отзывчивый дизайн.

Есть ли необходимость в запросе CSS Media с помощью Foundation 4? Если да, то как я могу использовать его, какую выгоду я могу получить от этого?

Answer 1

Вы должны прочитать разделы «Медиа-запросы» и «Сетка» в документации: http://foundation.zurb.com/docs/

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

Этот код будет делать «#block», чтобы быть 2 колонки шириной для каждого размера экрана из-за к классу «маленький-2». Класс «большой-8» переопределяет это поведение при ширине окна 768 пикселей и выше, делая его шириной 8 колонок на больших экранах.

Чтобы упростить, этот код отобразит «#block» шириной 2 столбца на экранах мобильных телефонов и 8 столбцов на экранах рабочего стола.

Если вам нужна поддержка IE6-8, вам нужно использовать Respond.js тоже: https://github.com/scottjehl/Respond