CSS единицы измерения относительно области просмотра экрана.
Размер меняется в зависимости от размера страницы. 1 единица измерения - это 1% видимой области страницы.
Изменение размера элемента
vh - высота области просмотра.
vw - ширина области просмотра.
Следующий элемент будет равен 50% ширины окна:
#V1{width:50vw;}
Следующие параметры работают так:
если высота устройства больше его ширины то размер будет взят от ширины.
Если высота устройства станет меньше ширины, то размер будет взят от высоты.
vmin - размер от наименьшей высоты или ширины.
vmax - размер от наибольшей высоты или ширины.
#V1{width:50vmin;}
Изменение размера текста
Текст будет меняться в % от ширины страницы.
#fs{font-size: 1.8vw;}
На смартфонах такой текст получится слишком мелким.
Можно задать минимальный размер шрифта при помощи формулы.
В данной формуле следует соблюдать пробелы между оператором и операндами обязательны.
fs2{font-size: calc(14px + 1vw);}
Тогда минимальный размер шрифта будет равен 14px+1% от размера окна браузера.