Vw и Vh или @media

#вёрстка

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

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

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



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

  DiV





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

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

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

Ответы

Ответ 1

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

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

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


Ответ 2

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

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