Медиа-запросы CSS в дизайн-теме Zen

Медиа-запросы формируют отдельные CSS-правила для носителей и устройств различных типов. В данном уроке добавлены медиа-запросы CSS для оформления HTML-кода списка школьных предметов в одну, две или четыре колонки в зависимости от ширины браузера. Использована конструкция типа @media all and (min-width: 40em) {}, которая добавляет CSS-код в фигурных скобках для экранов шириной от 40em. Здесь ширина указана в em — относительных единицах измерения, соответствующих размеру шрифта в системе пользователя по-умолчанию. Как правило 1em равен 16px.

Продемонстрировано добавление медиа-запросов в среде дизайн-темы Zen с помощью миксина и SASS-переменных для хранения значений переходных точек дизайна — 40 и 80em. Таблицы стилей скомпилированы из SASS-файлов в командной строке с помощью команды compass compile.

Код миксина для создания медиа-запроса:

@mixin breakpoint($breakpoint-size) {
  @media all and(min-width: $breakpoint-size) {
    $content;
  }
}