Чтобы создать медиа запросы в CSS, нужно использовать at-rule @media. Синтаксис медиа запроса выглядит так:
@media screen and (max-width: 767px) {
/* стилевые правила */
}
Это означает, что стилевые правила внутри медиа запроса будут применяться только для устройств с максимальной шириной экрана 767px.
Существует несколько типов медиа запросов, например:
- screen: запрос будет применяться только для мониторов.
- print: запрос будет применяться только при печати.
- all: запрос будет применяться для любого типа устройства.
Также существует возможность комбинировать несколько условий при помощи логических операторов and и or. Например:
@media screen and (max-width: 767px) and (orientation: portrait) {
}
@media screen and (min-width: 768px) and (max-width: 991px) {
}
@media (min-width: 1200px), print {
}
При этом стилевые правила внутри каждого медиа запроса будут применяться только при выполнении соответствующих условий.
