Для чего нужны Media запросы

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

Пример:

/* Стили для экранов шириной до 600px */
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
  .sidebar {
    display: none;
  }
}

/* Стили для экранов от 601px до 1200px */
@media (min-width: 601px) and (max-width: 1200px) {
  .container {
    width: 90%;
  }
}

Ключевые особенности:

• Позволяют создавать breakpoints (точки перехода)
• Поддерживают логические операторы (and, not, only)
• Можно проверять не только ширину, но и высоту, соотношение сторон, тип устройства и другие характеристики