Сделать адаптивный шрифт в CSS можно используя единицы измерения, такие как vw, vh, rem, em.
- VW (Viewport Width) Единица измерения vw позволяет установить размер шрифта в процентах от ширины окна браузера. Например, если установить размер шрифта равным 2vw, то размер шрифта будет равен 2% от ширины окна браузера.
h1 {
font-size: 4vw;
}
- VH (Viewport Height) Аналогично, единица измерения vh позволяет установить размер шрифта в процентах от высоты окна браузера.
h1 {
font-size: 4vh;
}
- REM (Root EM) Единица измерения rem позволяет установить размер шрифта в отношении к базовому размеру шрифта страницы (обычно 16 пикселей). Если, например, установить размер шрифта равным 2rem, то размер шрифта будет равен 32 пикселям (16 * 2).
h1 {
font-size: 2rem;
}
- EM (Relative to Parent) Единица измерения em позволяет установить размер шрифта относительно размера шрифта родительского элемента. Если, например, установить размер шрифта тега p равным 1.2em, то размер шрифта будет на 20% больше, чем размер шрифта его родительского элемента.
p {
font-size: 1.2em;
}
Также есть другие способы создания адаптивного шрифта, включая использование медиа-запросов и JavaScript.