CSS-медиазапросы: меняем сетку и цвета по условию

Медиазапрос включает CSS-правила, когда выполняется условие: например, области просмотра хватает ширины или в системе выбрана тёмная тема. В примерах Coddy с работающим предпросмотром можно проверить оба сценария.

Начните с сетки: сужайте окно браузера и наблюдайте, как три колонки превращаются в две, а затем в одну. Правила min-width, задающие минимальную ширину, идут от меньшего порога к большему. На широком окне оба условия выполняются, и более позднее правило определяет число колонок.

Затем попробуйте тёмную тему: пример меняет переменные с цветами вслед за системной настройкой. Если мобильная сетка не появляется на телефоне, разбор метатега viewport объясняет, как задать браузеру ширину страницы по ширине устройства.

#практика #основы