Обновлено 16.12.2022
vh (viewport height), vw (viewport width) — это новые единицы измерения, разработаны для адаптивной верстки и размеры зависят от окон браузера (размеров устройств). vh (1% высоты окна, то есть если задать font-size:1vh, то на экране монитора с высотой экрана 1000px размер шрифта будет равен 10px) зависит от высоты окна браузера, а vw (1% ширины окна), соответственно, от ширины окна браузера. Также есть связанная с ними величина, которая ограничивает их vmin — по наименьшему из величин vh, vw, а vmах — по наибольшему значению из значений величин vh, vw.
rem (корневой шрифт, первый символ r, означает root и переводится как корень) — сначала размер шрифта настраивается в px в теги <html> (там же меняются) и затем относительно тега <html> применяются в единицах измерения rem на весь html документ — глобально.
Пример использования rem css html код
html {
font-size: 18px;
}
div.font1 >span {
font-size: 0.7rem;
}
div.font2 >span {
font-size: 0.9rem;
}
<div class="font1">
<span>Пример<br>
<span>отображения <br>
<span>текста<br>
<span>с использованием 0.7 rem</span>
</span>
</span>
</span>
</div>
<div class="font2">
<span>Пример<br>
<span>отображения <br>
<span>текста<br>
<span>с использованием 0.9 rem</span>
</span>
</span>
</span>
</div>
отображения
текста
с использованием 0.7 rem
отображения
текста
с использованием 0.9 rem
em (ex- высота шрифта) — относительная единица самого элемента и размер шрифта масштабируется только относительно свойства font-size (значение шрифта переопределяется в зависимости от вложенности).
Пример использования em css html код
span {
font-size: 0.7em;
}
<span>Пример<br>
<span>отображения <br>
<span>текста<br>
<span>с использованием em</span>
</span>
</span>
</span>
Примеротображения
текста
с использованием em
% — размер шрифта в процентах относительно родительского элемента.
Пример использования процентов % css html код
div.font3 span {
font-size: 80%;
}
<div class="font3">
<span>Пример<br>
<span>отображения <br>
<span>текста<br>
<span>с использованием 0.7 em</span>
</span>
</span>
</span>
отображения
текста
с использованием 0.7 em
admin
Ваш комментарий будет первым