Ответ
@media — это CSS-правило, позволяющее применять стили в зависимости от характеристик устройства (ширина экрана, ориентация, разрешение и т. д.). Используется для создания адаптивного дизайна.
Пример:
/* Стили для экранов шириной до 768px */
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
/* Стили для экранов в альбомной ориентации */
@media (orientation: landscape) {
.sidebar {
width: 30%;
}
}Ключевые моменты:
- Работает с медиа-запросами (тип устройства, условия).
- Часто используется
min-width/max-widthдля адаптации под мобильные устройства. - Можно комбинировать условия через
and,not,only. - Поддерживается всеми современными браузерами.
Ответ 18+ 🔞
А, слушай, про эту вашу @media! Ну, это ж такая штука, чтобы твой сайт не выглядел, как пизда с ушами, когда кто-то смотрит его с телефона. Представь: ты на компе всё красиво сделал, а на телефоне у твоего заголовка половина букв на соседней улице. Вот чтобы такого не было, и нужны эти медиа-запросы.
Короче, это как умный швейцар для стилей. Он смотрит на устройство посетителя — «ой, у тебя экран уже 768 пикселей?» — и говорит: «Ладно, дружок, для тебя вот эти правила CSS сработают, а остальные — нахуй».
Вот смотри, как это выглядит в коде, тут всё просто:
/* Это для всех подряд, обычные стили */
body {
font-size: 16px;
}
/* А это уже наш швейцар-хуевейцар работает. Говорит: */
/* "Эй, если ширина экрана (max-width) максимум 768px, то внутри этих скобок — закон!" */
@media (max-width: 768px) {
body {
font-size: 14px; /* На телефоне шрифт поменьше сделаем, а то не влезет, ёпта */
}
.sidebar {
display: none; /* Боковую колонку вообще спрячем, иди нахуй с такой шириной */
}
}А ещё можно, например, на ориентацию забить:
/* Если телефон повернули горизонтально (альбомный режим) */
@media (orientation: landscape) {
.video {
width: 70vw; /* Видео на весь экран растянем, красота! */
}
}Что важно запомнить, чтобы не облажаться:
min-width— это как «от» (от такой-то ширины и БОЛЬШЕ применяй стили).max-width— это как «до» (ДО такой-то ширины и МЕНЬШЕ применяй).- Условия можно склеивать через
and, типа@media (min-width: 768px) and (max-width: 1024px)— попадаем в конкретный диапазон. - Поддерживается это всё теперь везде, даже в твоём древнем браузере, так что не ссы.
Вот и вся магия. Без этого сейчас сайты — просто манда с ушами, ни один уважающий себя фронтендер так не делает. Чих-пых и в продакшен!