Медиа-запросы CSS в дизайн-теме Zen
В уроке добавлены медиа-запросы типа @media all and (min-width: 40em) {} для различного оформления HTML-кода списка школьных предметов в зависимости от ширины окна браузера.
Медиа-запросы формируют отдельные 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;
}
}