Make Typography Responsive
Вместо использования текста em или px для размера вы можете использовать единицы просмотра для гибкой типографии. Единицы просмотра, такие как проценты, являются относительными единицами, но они основаны на разных позициях. Единицы Viewport относятся к размеру видового экрана (ширина или высота) устройства, а проценты относятся к размеру элемента родительского контейнера. Четыре различных видовых экрана:
-
vw: 10vwбудет составлять 10% от шириныvw: 10vwпросмотра. -
vh: 3vhбудет 3% высоты просмотра. -
vmin: 70vminбудет на 70% меньше размераvmin: 70vminпросмотра (высота и ширина). -
vmax: 100vmaxбудет на 100% больше размераvmax: 100vmaxпросмотра (высота и ширина).
Установите width тега h2 на 80% ширины окна просмотра и width абзаца как на 75% меньшего размера окна просмотра.