5

Здравствуйте!

У меня с другом возник спор: что лучше vw и vh или @media-запросы?

Я утверждаю, что vw и vh можно и нужно внедрять в разработку сайтом потому, что эти величины помогают подстраивать сайту под любые разрешения экранов. По-этому я решил создать мини-сайт где эти величины будут везде

div {
  width: 25vw;
  height: 25vh;
  font-size: 5vw;
  background-color: black;
  color: white
}
<div>
  DiV
</div>

Они маштабируют блоки под все разрешение экранов, при этом сохраняя нормально расположение блоков (как на больших экранах, так и на маленьких). А @media не удобен тем, что там вручную нужно указывать все размеры, которые должны быть не устройствах. Ведь всё равно, никогда не знаешь с какого устройства зайдёт пользователь.

Мой же друг утверждает, что @media лучше, т.к. техника довольно стойкая, используется на многих сайтах и устройствах и он отлично справляется со своей обязанностью подстраиванием. А vw и vh бесполезная вещь, которая в принципе и не нужна во все. Зачем они, если подстраивать можно с помощью @media?

Так что же лучше использовать vw и vh или @media в подстройке сайта под разные экраны?

8
  • И того и другого! И можно без хлеба (с) Пух
    – vp_arth
    8 фев 2017 в 9:23
  • @vp_arth, увы. Зачем media если применяется viewport или зачем viewport если применяется media?
    – Yuri
    8 фев 2017 в 9:24
  • Вот вы изменили ширину окна браузера, 5 колонок(20vw) перестали влезать. Что дальше?
    – vp_arth
    8 фев 2017 в 9:28
  • @vp_arth, не перестали. 20vw - это 20% от размера окна браузера и блоки с ужаться или расширяться. Смотря куда изменишь
    – Yuri
    8 фев 2017 в 9:29
  • 2
    К телефону лупа прилагается? Медиа-запросы хороши тем, что позволяют показывать разную верстку на разных layout.
    – vp_arth
    8 фев 2017 в 9:30

3 ответа 3

5

Это совершенно разные вещи, использование которых друг другу никак не противоречит. Задание размеров чего бы то ни было в единицах vw/vh и @media-запросы имеют совершенно разные предназначения.

Используйте vw/vh, когда вам нужно единицы измерения относительно ширины/высоты экрана.

Используйте @media, когда вам нужно разные стили под разные разрешения, под разные устройства, стили чисто для печати и т.д.

1
  • 7
    Минусаторы, а прокомментировать?
    – Qwertiy
    8 фев 2017 в 10:28
0

Потому что ни о какой точности идти речь не может тогда. 1vw - 1% от ширины окна. Чтобы сверстать 120 пикселей блок, тебе нужно указать 1.2vw, но в голове постоянно держать суть того, что ты верстаешь от 100px ширины. Это лишний гемор. Но это ещё совсем не беда)
Беда начнется там, когда нужно будет изменять стили. Я тебя удивлю, но: для мобилок нужно не нормальное отображение сайта (это в том числе, но не только), а ещё и дизайн соответствующий. И без медиазапроса ИЗМЕНИТЬ дизайн можно только через костыли, которые будут работать через пень-колоду (в лучшем случае), а в худшем - будут сложнее, чем ненавистный тобой @media.
А то, что будут проблемы со скейлингом и что браузеру заново нужно будет пересчитывать ширину всего на странице - это не обсуждается даже. Браузер выводит пиксели, а не % ширины. Это нужно считать и отрисовывать.

Когда тебе придет макет в фотошопе и сказано будет "сделай так", то ничего у тебя не получится.
Потому что ширина макета будет каких-нибудь 2140 пикселей, и ты будешь бегать с калькулятором всё пересчитывать?

8
  • 2
    vw/vh/vm - таки имеют место быть иногда. Когда вам действительно нужна треть экрана, а не 713px от вышеуказанного макета.
    – user236014
    8 фев 2017 в 9:44
  • 1
    @Anon, я не сказал, что от вьюпорт-величин следует отказаться навсегда. А применять тогда, как ты сказал - когда нужны проценты от ширины экрана. Эти величины не призваны делать респонсибл-дизайн. 8 фев 2017 в 9:46
  • 5
    Хотел поставить плюс, но передумал, когда понял, что ответ сводится к "всегда и везде используйте пиксели". Принципиально не согласен.
    – Qwertiy
    8 фев 2017 в 10:08
  • 1
    @VostokSisters, модальное окно можно сделать и без них.
    – Qwertiy
    8 фев 2017 в 10:16
  • 1
    @VostokSisters, у меня диалог получается и без них, и без js.
    – Qwertiy
    8 фев 2017 в 10:28
0

грамотный подход я к примеру делаю браузерную игру стратегию дает при помощи vw и так д.. отличный результат , минус один для мобильников нет масштабируемости .. там уже идет просто в моем случае второй стиль который выбирает пользователь . но не забываем что многие игроманы уже сидят на мониторах минимум 20 дюймов и больше при 4 к мониторах это я сжц по своим пользователям вот тут параметры новые отрабатывают на ура подгоняюсь под размеры экрана просто правильно используйте вложенность блоков и не будет не чего вылазить плюс есть не большой скриптик который даже при px дает эффект тоже самого что и vw and vh

1
  • 1
    это ответ или просто поток сознания? 2 июн 2021 в 9:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.