Медиа запросы в CSS — это инструмент, который позволяет изменять стили в зависимости от параметров устройства, таких как ширина экрана, разрешение экрана и т.д.
Медиа запросы позволяют создавать адаптивный дизайн, который подстраивается под размеры экрана и различные устройства, такие как мобильные телефоны, планшеты, настольные компьютеры и т.д.
Медиа запросы основаны на синтаксисе @media
, который позволяет определять правила CSS в зависимости от условий, заданных в скобках.
Вот пример медиа запроса, который изменяет цвет фона для экранов шириной от 600px:
@media screen and (min-width: 600px) {
body {
background-color: #fff;
}
}
В данном примере мы используем медиа запрос @media screen
, который означает, что мы будем применять правила для экранов. Условие and (min-width: 600px)
означает, что мы будем применять правила только для экранов с шириной 600px и более.
Внутри медиа запроса мы задаем правило CSS для изменения цвета фона для элемента body
.
Такие медиа запросы позволяют создавать адаптивный дизайн, который будет отображаться оптимальным образом на различных устройствах.