Как работает Media запрос?

Как работают Media запросы

Media запросы (media queries) — это фундаментальный инструмент в современной веб-разработке, который позволяет применять разные CSS стили в зависимости от характеристик устройства. Они являются основой для отзывчивого дизайна (responsive design) и позволяют веб-сайтам выглядеть хорошо на устройствах любого размера.

Синтаксис и структура

Основная структура media query выглядит так:

@media (condition) {
  /* CSS стили */
}

Можно использовать несколько условий с логическими операторами:

/* Мобильные устройства в портретной ориентации */
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
}

/* Планшеты и большие экраны */
@media (min-width: 768px) and (max-width: 1024px) {
  .container {
    width: 750px;
  }
}

/* Большие мониторы */
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Основные типы условий

Ширина экрана (самое популярное)

• min-width — применить стили для экранов шириной ≥ X
• max-width — применить стили для экранов шириной ≤ X
• width — точная ширина

Ориентация

@media (orientation: portrait) {
  /* Портретная ориентация */
}

@media (orientation: landscape) {
  /* Альбомная ориентация */
}

Плотность пикселей

@media (min-resolution: 2dppx) {
  /* Retina дисплеи, высокая плотность */
  background-image: url(image-2x.png);
}

Предпочтение темной темы

@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #fff;
  }
}

Mobile-First подход

Лучшая практика в современной разработке — писать стили сначала для мобильных устройств, а потом добавлять медиа-запросы для больших экранов:

/* По умолчанию для мобильных */
.card {
  width: 100%;
  margin: 10px 0;
  font-size: 14px;
}

/* Для планшетов */
@media (min-width: 768px) {
  .card {
    width: 48%;
    margin: 15px;
    font-size: 16px;
  }
}

/* Для десктопа */
@media (min-width: 1200px) {
  .card {
    width: 30%;
    font-size: 18px;
  }
}

Использование в JavaScript

Можно проверять media queries программно:

// Проверка текущего медиа-запроса
const isMobile = window.matchMedia("(max-width: 768px)").matches;

if (isMobile) {
  console.log("Мобильное устройство");
} else {
  console.log("Десктоп");
}

// Отслеживание изменений (при изменении размера окна)
const mediaQuery = window.matchMedia("(max-width: 768px)");

mediaQuery.addEventListener("change", (e) => {
  if (e.matches) {
    console.log("Перешли на мобильный вид");
  } else {
    console.log("Перешли на десктоп вид");
  }
});

Практические примеры

/* Скрытие элементов на мобильных */
@media (max-width: 767px) {
  .desktop-only {
    display: none;
  }
}

/* Изменение макета */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr; /* Один столбец на мобильных */
  }
}

@media (min-width: 769px) {
  .grid {
    grid-template-columns: repeat(3, 1fr); /* Три столбца на десктопе */
  }
}

Распространенные breakpoints

• 320px-480px — малые мобильные
• 481px-768px — большие мобильные и портретные планшеты
• 769px-1024px — альбомные планшеты
• 1025px+ — десктопные мониторы

Media queries — это неотъемлемая часть современного веб-дизайна, которая обеспечивает универсальный и удобный пользовательский опыт на всех устройствах.