В чем разница @media и @viewport?
Привет! Спасибо за вопрос! 
Их обоих объединяет то, что они называются 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 в галактике, который предназначен только для структуры а не внешнего вида….
Да пребудет с тобой Сила
Разница? Во всем. Viewport нужен, чтобы открываемый сайт правильно подстраивался под размер девайса, а media, чтобы прописать стили для разных размеров отображения страницы. Чувствуете разницу? Установка условно говоря "разрешения" просмотра страницы и стили для отображения страницы при определенном "разрешении" просмотра