В современном цифровом мире адаптивный дизайн стал иметь решающее значение для создания веб-сайтов, которые легко адаптируются к различным устройствам и размерам экрана. Медиа-запросы в CSS — мощный инструмент, позволяющий разработчикам применять разные стили, исходя из особенностей устройства пользователя. В этой статье мы рассмотрим различные методы установки нескольких медиа-запросов в CSS, а также приведем примеры кода.

Метод 1. Использование нескольких правил @media

@media screen and (max-width: 600px) {
  /* Styles for devices with a maximum width of 600px */
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  /* Styles for devices with a width between 601px and 900px */
}
@media screen and (min-width: 901px) {
  /* Styles for devices with a minimum width of 901px */
}

Метод 2. Объединение нескольких запросов с помощью логических операторов

@media screen and (max-width: 600px), (min-width: 601px) and (max-width: 900px), (min-width: 901px) {
  /* Styles for different width ranges */
}

Метод 3. Использование медиафункций с диапазонами

@media screen and (width <= 600px) {
  /* Styles for devices with a maximum width of 600px */
}
@media screen and (width > 600px) and (width <= 900px) {
  /* Styles for devices with a width between 601px and 900px */
}
@media screen and (width > 900px) {
  /* Styles for devices with a minimum width of 901px */
}

Метод 4. Применение нескольких медиазапросов к определенным элементам

@media screen and (max-width: 600px) {
  .element {
    /* Styles for devices with a maximum width of 600px */
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .element {
    /* Styles for devices with a width between 601px and 900px */
  }
}
@media screen and (min-width: 901px) {
  .element {
    /* Styles for devices with a minimum width of 901px */
  }
}

Метод 5. Использование ключевого слова onlyдля определенных типов мультимедиа

@media only screen and (max-width: 600px) {
  /* Styles for devices with a maximum width of 600px */
}
@media only screen and (min-width: 601px) and (max-width: 900px) {
  /* Styles for devices with a width between 601px and 900px */
}
@media only screen and (min-width: 901px) {
  /* Styles for devices with a minimum width of 901px */
}

Используя медиазапросы в CSS, разработчики могут создавать адаптивный дизайн, адаптирующийся к различным размерам экрана и устройствам. В этой статье мы рассмотрели пять различных методов настройки нескольких медиа-запросов, приведя примеры кода для каждого подхода. Применяя эти методы, вы можете гарантировать, что ваш веб-сайт будет выглядеть и функционировать оптимально на широком спектре устройств.