В чем разница между свойствами @media и @media screen?

Разница между @media и @media screen

@media в CSS используется для применения стилей в зависимости от характеристик устройства. Разница между @media и @media screen связана с типом устройства (media type).

@media без типа устройства

Когда вы пишете просто @media без указания типа, по умолчанию используется все типы устройств. Это эквивалентно @media all:

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

Или более явно:

@media all and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

Этот вариант применяется ко всем устройствам: компьютерам, планшетам, телефонам, принтерам, экранам с синтезом речи и т.д.

@media screen

@media screen применяет стили только к экранам (мониторы, телефоны, планшеты и другие интерактивные дисплеи):

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
  }
}

Типы media (Media Types)

В CSS существуют следующие основные типы устройств:

/* Все устройства (по умолчанию) */
@media all { }

/* Экраны (мониторы, смартфоны, планшеты) */
@media screen { }

/* Печать (принтеры, print preview) */
@media print { }

/* Устройства с синтезом речи */
@media speech { }

Примеры использования:

/* Для веб-сайтов (экран) */
@media screen {
  body {
    background-color: white;
    color: #333;
  }
}

/* Для печати */
@media print {
  body {
    background-color: white; /* Экономия чернил */
    font-size: 12pt;
  }
  .no-print {
    display: none; /* Скрываем навигацию при печати */
  }
}

/* Для читателей с синтезом речи */
@media speech {
  .visually-hidden {
    display: block; /* Показываем скрытый текст для читающих устройств */
  }
}

Практическое сравнение

@media (max-width: 768px):

@media (max-width: 768px) {
  /* Применяется на всех устройствах (экран, печать, и т.д.) */
  /* Когда ширина <= 768px */
  h1 {
    font-size: 24px;
  }
}

@media screen and (max-width: 768px):

@media screen and (max-width: 768px) {
  /* Применяется ТОЛЬКО на экранах (не на печати) */
  /* Когда ширина <= 768px */
  h1 {
    font-size: 20px;
  }
}

@media print and (max-width: 768px):

@media print and (max-width: 768px) {
  /* Применяется ТОЛЬКО при печати */
  /* Когда печать <= 768px (редко используется) */
  h1 {
    font-size: 16px;
  }
}

Современная практика

В современных приложениях @media screen часто является стандартом по умолчанию, потому что:

• Большинство стилей предназначены для веб-браузеров
• Печать обрабатывается отдельно в специальных @media print блоках
• Синтез речи используется редко

Поэтому обычная структура выглядит так:

/* Основные стили (применяются везде) */
body {
  font-family: Inter, sans-serif;
  color: #333;
}

/* Адаптивность для экранов */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

@media screen and (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

/* Специальные стили для печати */
@media print {
  .no-print {
    display: none;
  }
  body {
    font-size: 10pt;
  }
}

Главная разница

• @media (condition) = применяется ко всем типам устройств (эквивалент @media all)
• @media screen = применяется только к экранам
• Используй @media screen для адаптивного дизайна веб-сайтов
• Используй @media print для стилей печати
• Используй @media all (или просто @media) редко, когда нужно охватить все устройства одновременно