Медиазапрос включает CSS-правила, когда выполняется условие: например, области просмотра хватает ширины или в системе выбрана тёмная тема. В примерах Coddy с работающим предпросмотром можно проверить оба сценария.
Начните с сетки: сужайте окно браузера и наблюдайте, как три колонки превращаются в две, а затем в одну. Правила
min-width, задающие минимальную ширину, идут от меньшего порога к большему. На широком окне оба условия выполняются, и более позднее правило определяет число колонок.Затем попробуйте тёмную тему: пример меняет переменные с цветами вслед за системной настройкой. Если мобильная сетка не появляется на телефоне, разбор метатега viewport объясняет, как задать браузеру ширину страницы по ширине устройства.
#практика #основы