Единица размера vw

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

Пример

Код примера скопирован в буфер
<!DOCTYPE html>
<html lang="ru">
 <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