g_hagmt
@g_hagmt
Начинающий веб-разработчик

В чем разница @media и @viewport?

Если мне нужно проверить параметры девайса для появления правильных стилей, что следует использовать? И в чем вообще разница? А также, интересует разница между настройкой viewport'a в css и в html.
  • Вопрос задан
  • 776 просмотров
Решения вопроса 2
ZakkMalin
@ZakkMalin
Designer
Привет! Спасибо за вопрос!
Их обоих объединяет то, что они называются 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 в галактике, который предназначен только для структуры а не внешнего вида….

Да пребудет с тобой Сила
Ответ написан
joeberetta
@joeberetta
1. Муж; 2. Frontend разработчик; 3. Студент
Разница? Во всем. Viewport нужен, чтобы открываемый сайт правильно подстраивался под размер девайса, а media, чтобы прописать стили для разных размеров отображения страницы. Чувствуете разницу? Установка условно говоря "разрешения" просмотра страницы и стили для отображения страницы при определенном "разрешении" просмотра
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы