vw

Единица vw соответствует 1% от ширины области просмотра браузера, таким образом, 100vw равно всей ширине области просмотра. Элементы, размер которых задан в единицах vw будут менять свой размер при изменении размеров окна браузера.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vw</title> <style> .upscale { font-size: calc(14px + 1vw); /* Увеличиваем размер шрифта */ } .downscale { font-size: calc(32px - 1vw); /* Уменьшаем размер шрифта */ } </style> </head> <body> <p class="upscale">Социализация, как бы это ни казалось парадоксальным, отражает институциональный импульс.</p> <p class="downscale">Социализация, как бы это ни казалось парадоксальным, отражает институциональный импульс.</p> </body> </html>

В данном примере при расширении окна браузера текст в первом абзаце увеличивается, а во втором абзаце, наоборот, уменьшается.

Спецификация

Спецификация Статус
CSS Values and Units Module Level 4 Рабочий проект
CSS Values and Units Module Level 3 Возможная рекомендация

Браузеры

9 12 20 20 6 19
5 19 46 6

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также