Как сделать медиа запросы css

Чтобы создать медиа запросы в 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 {

}

При этом стилевые правила внутри каждого медиа запроса будут применяться только при выполнении соответствующих условий.