Верстка с относительными единицами?

Question

[ae0lian]

Использование на html размер шрифта, который зависит от vw, например 100vw/1920*10. И от этого значения выставлять размеры блоков, шрифтов в em, rem. Хочу опробовать такой подход, чтобы уменьшить количество медиа запросов. Можете ли ваши примеры покидать, чтобы через инспектор глянуть. Или пару советов дать, так как надо через пару макетов пройти, чтобы пришло больше понимание, какую единицу использовать в какой ситуации.

Видео - тут было упомянуто про это, поэтому поинтересовался спросить об этом на 7 минуте немного дальше автор говорит, что можно и для обычных сайтов использовать тоже..

Comments

[Rustam Bainazarov]

Как переход на EM/REM уменьшит количество медиазапросов? А, так ещё и VW для размера шрифта… ну коли так, то вы пойдете таким путём, вы получите адаптивность-калеку. Представляю, как это в поддержке кода будет жутко. Но количество медиазапросов вы, конечно, уменьшите, LOL, как и качество кода.

[ae0lian]

Рустам Байназаров, я тут увидел - https://www.youtube.com/watch?v=_63sz4aHrFo&t=441s на 7 минуте +-.

[Ankhena]

чтобы уменьшить количество медиа запросов

Сверстайте так какой-нибудь одни блок, например, сетку товаров в инет-магазине.
И посмотрите как это будет выглядеть на разных устройствах, потом посчитайте количество media, которые вы допишете, чтобы выглядело норм.

Заодно, всё это проделываете, поймете нравится вам такой подход или нет.

какую единицу использовать в какой ситуации

Неоднократно писала, что ту, от которой зависит конкретный параметр.
Простейший пример: толщина border.

Answer 1

[Lord_Dantes]

Вопрос тупо не корректный: что? зачем?
Нашел в качестве вопроса только это -

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

Нету таких примеров или по-крайней мере уважающие себя программисты не пишут так.

Comments

[ae0lian]

В вопросе дописал ссылку на видео, где данный пример был показан. Вроде автор вполне адекватный специалист.

[Lord_Dantes]

ae0lian, ну не знаю вы не переубедили меня этим видео. Если это настолько круто или современно что аж видео из 2018, но все верстают на флексах видимо не зашёл ваш пример.

[Rustam Bainazarov]

ae0lian, я посмотрел видео немного. И специалист действительно нормальный. Потому что он говорит про единичные элементы на сайте а-ля те же анимационные блоки, когда нужна плакатная вёрстка.

Но он не говорит, что весь сайт так надо делать.

[Rustam Bainazarov]

ae0lian, хотя нет, обновление, он говорит про вёрстку простых сайтов в целом таким образом.

Хм… Хм… похоже на велосипед, назначение которого в общей вёрстке — я не понял.

[ae0lian]

Рустам Байназаров, Так и я не писал, что все так верстать, обратного то же не писал. В видео не раскрыт такой подход, исходники не нашел. Но он там упомянул, что можно так верстать и обычные сайты, не анимационные и это мощный механизм.

[Rustam Bainazarov]

ae0lian, я подобный использую уже 100 лет для верстки баннеров, когда нужно текст вписать во все разрешения.

Для сайта в целом я бы такое не стал использовать. Усложнение на ровном месте.

[Lord_Dantes]

ae0lian, нету таких примеров потому-что даже если делать сайт простенький, проще запилить пару блоков в медиа, а не морочить голову и умножать и прописывать относительно чего-то. Возможно вы правы но это лишь в некоторых случаях где это уместно.

[ae0lian]

slave bb, я просто спрашиваю, особо большим опытом не располагаю. Сейчас просто изучаю тему анимации и невзначай заметил про данный способ к верстке. Тут не говориться об отсутствии медиа запросов в целом, возможно меньшее количество их в целом и адаптивность блоков между брекпоинтами, так как есть привязка к вьюпорту.
Мне кажется, что можно попробовать так тестовый проект сделать. Возможно, не все так проблематично, как может показаться.

[Rustam Bainazarov]

ae0lian, главное, когда экспериментируете, — учитесь делать так, как это принято в отрасли, чтобы, будучи в команде, в срочном порядке не учиться делать такие вещи обычным путём, а не экзотическим.

Answer 2

[dom1n1k]

Использование размера шрифта в vw (в чистом виде, без calc) - это плохая идея.
Во-первых просто нет смысла. Во-вторых, в браузере перестает работать Ctrl+/-