Привет! Спасибо за вопрос!
Их обоих объединяет то, что они называются at-rules
https://developer.mozilla.org/en-US/docs/Web/CSS/A...@media это объявление тела медиа-запроса
@viewportэто правило задающее вьюпорт вместо html viewport (на стадии draft)
Вместо css вьюпорта, используйте тот что в html, в css это свойство находится ещё на стадии разработки
Когда-то давным-давным давно, в далёкой-далёкой галактике...
Разрешение экранов айфона стало громадным, и плотность пикселей тоже
Компания apple придумала в мета атрибуте name значение viewport
<meta name="viewport">
Чтобы научить браузеры рендерить веб-страницы состоящих из
обычных пикселей в "СSS-пиксели"
Но, как вы можете понимать, оно относится к HTML а не к CSS
И W3C не нужно чтобы сущности, связанные с UI плодились в HTML
Поэтому
W3C создал правило @viewport но, уже для CSS:
@media screen and (min-width: 640px) and (max-width: 1024px) {
@viewport { width: 640px; }
...
}
Разница между viewport-HTML и @viewport-CSS лишь в том, что его параметры вы задаёте уже в CSS, а не в HTML
@viewport заставляет по другому рендерить страницу, чтобы текст выглядел более сглажено и читабельно, в то время как
@media запросы это просто ключи для построения уникальных css правил под разную высоту и ширину экранов
В завершении, @viewportдолжен будет покончить раз и навсегда с ненужными в HTML вкраплениями от UI, бороться за восстановление свободы HTML в галактике, который предназначен только для структуры а не внешнего вида….
Да пребудет с тобой Сила
Простой
Средний