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

Медиа-запросы (Media Queries) — это инструмент в CSS, используемый для изменения стилей элементов на странице в зависимости от размера экрана и различных устройств. Данный инструмент помогает делать страницу адаптивной.

Медиа-запросы начинаются с ключевого слова @media, за которым следует условие, которое определяет, когда нужно применять эти стили. Например, чтобы изменить стили элементов на странице, когда ширина экрана меньше 480 пикселей, используйте следующий код:

@media (max-width: 480px) {
  /* CSS-правила для экранов с шириной меньше 480 пикселей */
}

Обратите внимание, что мы задали условие max-width: 480px, которое означает, что данные стили будут применяться только для экранов, ширина которых меньше или равна 480 пикселей.

Вы также можете задать несколько условий для медиа-запросов, разделяя их с помощью оператора and. Например, чтобы изменить стили элементов на странице для устройств с Retina-дисплеем (2x плотность), когда ширина экрана меньше 480 пикселей, используйте следующий код:

@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 480px) {
  /* CSS-правила для экранов с Retina-дисплеем шириной меньше 480 пикселей */
}

Здесь мы задали два условия: -webkit-min-device-pixel-ratio: 2, которое означает, что данное CSS-правило будет применяться только для устройств с Retina-дисплеем (2x плотность) и max-width: 480px, которое означает, что данные стили будут применяться только для экранов, ширина которых меньше или равна 480 пикселей.

Медиа-запросы могут также содержать несколько CSS-правил для нескольких условий. Например:

@media (max-width: 480px) {
  /* CSS-правила для экранов с шириной меньше 480 пикселей */
}
@media (min-width: 481px) and (max-width: 768px) {
  /* CSS-правила для экранов с шириной от 481 до 768 пикселей */
}
@media (min-width: 769px) {
  /* CSS-правила для экранов с шириной больше 769 пикселей */
}

Здесь мы создали три медиа-запроса, которые будут применять разные CSS-правила для разных диапазонов ширины экранов.