Зачем нужен Media запрос

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

/* Стили для мобильных */
@media (max-width: 767px) {
  .container {
    width: 100%;
  }
}

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

/* Стили для десктопов */
@media (min-width: 1024px) {
.container {
width: 980px;
}
}

Основные сценарии использования:
- Адаптация под разные размеры экранов
- Поддержка ретина-дисплеев (`@media (-webkit-min-device-pixel-ratio: 2)`)
- Учет ориентации устройства (`@media (orientation: portrait)`)
- Оптимизация для печати (`@media print`)