Величина шрифта vw?

Question

[Монти Пайтон]

Кто может рассказать своими словами как работает величина шрифта vw, и что это вообще такое, и для чего оно нужно, и кто в своей работе регулярно использует это?

Comments

[Евгений Вольф]

Что-то я не припоминаю таких единиц измерения... Они точно существуют в CSS? Вы их ни с чем не перепутали, например vh/vw или vmin/vmax?

[Монти Пайтон]

Евгений Вольф, vw, не то напечатал случайно потому что не в курсе ещё что это такое, исправил в вопросе, извините за ошибку, спасибо

[Евгений Вольф]

Ostin1, vw/vh - это ширина/ высота рабочей области браузера, т.е. видимой части (насколько я помню, скролл в эту часть не входит). Измеряется в %. То есть, на мониторе 1920х1080, если браузер развернут на полный экран, 1vw - будет равен 19.2px, а 1vh будет равен 10.8px. Соотв, 100vw и 100vh будут равны 1920 и 1080px (соотв.). То есть, 1vw = 1% ширины рабочей области браузера, 1vh = 1% высоты рабочей области.

[Ярослав Иванов]

Евгений Вольф, view width и view height

Answer 1

[Ankhena]

1vw = 1% ширины вьюпорта.
1vh = 1% высоты вьюпорта.
Посмотрите пример, увеличивайте и уменьшайте область с результатом. Если будете растягивать по ширине, текст будет увеличиваться, если по высоте, то не будет. Чтобы шрифт зависел от высоты, используйте vh.
https://jsfiddle.net/8tov1tLL/

Таким образом можно решать задачи типа "в баннере заголовок должен быть на ширину 90% экрана и всегда на одну строчку при любой ширине окна".

С обычным текстом единицы vw нужно использовать с осторожностью, чтобы не получить микроскопический нечитаемый текст.