px - піксель на екрані
% - від батьківського елементу
em - поточний розмір тексту (2em, 0.5em)
rem - те саме що em, але без впливу на елементи всередині
vh, vm - розміри відносно вікна браузера (не залежать від батьківського контейнера)
vmin, vmax - втиснути повне зображення, або вилізти по ширині
.fullscreen-bg {
background:url(image.jpg);
background-position:center;
background-size:cover;
width:100%;
height:100vh;
}
<div style="font-size:12px">
Текст 12
<div style="font-size:8px">
Текст 8
<div style="font-size:18px">
Техт 18
</div>
</div>
</div>
<div style="font-size:150%">
Побільше текст
<div style="font-size:150%">
Ще побільше текст
<div style="font-size:150%">
Ще побільше текст
</div>
</div>
</div>
<style>
li { font-size:0.8em; }
</style>
<ul style="font-size:50px">
<li>
1
<ul>
<li>
2
<ul>
<li>
3
<ul>
<li>
4
<ul>
<li>
5
<ul>
<li>
6
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<style>
li { font-size:0.8rem; }
</style>
<ul style="font-size:30px">
<li>
1
<ul>
<li>
2
<ul>
<li>
3
<ul>
<li>
4
<ul>
<li>
5
<ul>
<li>
6
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>