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

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

Пример:

/* Стили для экранов шириной до 768px */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

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

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

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