Для чего нужен @media screen в CSS

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

Пример:

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

/* Стили для мобильных (до 480px) */
@media screen and (max-width: 480px) {
  .menu {
    display: none;
  }
}

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

• screen указывает, что стили применяются только для экранов (не для печати и т.д.)
• Можно комбинировать условия через and, not, only
• Чаще всего используют breakpoints по ширине (min-width, max-width)