PassFront
  1. PassFront
  2. База знаний
  3. Responsive дизайн (адаптивность)

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

Responsive дизайн (адаптивность)

`@media screen` применяет стили только для устройств вывода типа «экран», обычно вместе с условием на размер.

@media screen and (max-width: 600px) {
  .sidebar { display: none; }
}

Типы медиа

  • screen — экраны (телефоны, планшеты, мониторы);
  • print — печать и предпросмотр печати;
  • all — все устройства (по умолчанию).

Типичное применение print:

@media print {
  nav, .ads { display: none; }
  a::after { content: " (" attr(href) ")"; }
}

Нужно ли писать screen

В современных браузерах @media (max-width: 600px) работает так же, как с screen. Явное screen нужно, если стили не должны попасть в печать.

Коротко для собеседования

@media screen ограничивает стили экранами; обычно его комбинируют с условиями на ширину, а для печати используют @media print.

Подробнее: MDN — Медиазапросы

Другие вопросы раздела