Что такое Media запросы

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

Пример:

/* Стили для экранов шире 768px */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

/* Стили для экранов уже 576px */
@media (max-width: 575px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }
}

Ключевые моменты:

• Работают по принципу условий @media
• Можно комбинировать условия с and, not, only
• Чаще всего используются min-width и max-width
• Поддерживаются всеми современными браузерами