Для чего нужен @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 — Медиазапросы