Как использовать единицы «vw» в адаптивной верстки сайта?

Question

[GromOrm]

Очень прошу, по-возможности объясните как верстать адаптивные страницы используя "vw"!
А конкретно:
1. В макете размер строки навигации 1500px как перевести в vw ?
2. Шрифты. По макету у < h1 > размер 48px, а дефолтный размер шрифта на странице 15px. Как в таких случаях использовать "vw".

Возможно глупый вопрос. Я чёт зашёл в тупик.

Comments

[Михаил]

В макете размер строки навигации 1500px как перевести в vw ?

зачем?

Шрифты. По макету у размер 48px, а дефолтный размер шрифта на странице 15px. Как в таких случаях использовать "vw".

зачем?

[GromOrm]

Михаил, такое тестоовое задание дали. Десктопная версия верстается в единицах vw ...

[Михаил]

GromOrm, бредятина

[Михаил]

GromOrm, что значит

Десктопная версия верстается в единицах vw

вообще все размеры в vw? вы уверены что нужно именно это?

Answer 1

[apoca1ipsis]

1500px=100vw
48px=3.2vw

Если нужен весь сайт в vw, то надо все размеры из дизайна разделить на 15 и результат деление и есть vw.
Было у меня ТЗ, вёрстка нужна в vw. Результат можно увидеть тут

Comments

[GromOrm]

Огромное спасибо! Ещё такой момент. Откуда константа 15 берётся ? Это дефолтный размер шрифта в браузере?

[apoca1ipsis]

GromOrm, нет. Если дизайна нарисован 1920px, то делить на 19.2.
100vw это ширина дизайна
К примеру для h1 48px.

1920px=100vw
48px=X

x=(48*100)/1920=2.5vw

[GromOrm]

apoca1ipsis, ёмаё! Огромное спасибо!!

[apoca1ipsis]

Есть ещё пакет для GULP postcss-px-to-viewport

Можно всё сверстать в PX, и потом перевести в VW.

Но 1-ый сайт я считал всё вручную. чтобы лучше понять VW так сказать.

[GromOrm]

apoca1ipsis, Понял. Буду иметь ввиду. Спасибо

Answer 2

[Дуболом Одноклеточный]

vw - Viewport Width
vh - Viewport Height

если задать 100vw, то это будет равняться 100% ширине экрана ( адаптируется при изменении размеров экрана ) тоже самое и с высотой
1vw - 1% ширины экрана
1vh - 1% высоты экрана

1. Нельзя просто так взять и перевести в vw, потому что везде 1vw или 1vh будет равняться разной цифре. Поэтому, просто используй @media в css или scss, и задавай фиксированные значения
2. Если задашь тексту размер например 15vw, это будет адаптивный текст, который будет автоматически подстраиваться под размеры экрана, таким образом всегда размер будет разный, и перевести в px нельзя. А вообще это используют на маленьких размерах экрана, типа если меньше 500px размер экрана, то можно задать в vw размер текста, и можно забить на более маленький размер экранов.

Использовать на постоянке для текста, лучше не надо, ведь нельзя задать фиксированный размер (у тебя в макете 48px) если задашь в vw, то постоянно будет изменяться при изменении размеров экрана, таким образом размер уже не будет равняться 48px.

Надеюсь понятно объяснил)

Comments

[GromOrm]

Понятно объяснили, спасибо! Но, все-таки верстать предётся с помощью vw )

[Дуболом Одноклеточный]

GromOrm, Если first-screen на весь экран высотой, юзайте height: 100vh;
100vh - 100% экрана

Если что могу приложить примеры к ответу