Единицы измерения в css

Все единицы измерения в css можно разделить на две группы: абсолютные (например px) и относительные (%). В этой статье мы рассмотрим размеры текста — правило font-size.

Начнём по порядку:
1. px это базовая единица измерения.

1
2
3

p{
   font-size: 16px; 
}

16px — значение по умолчанию для браузера

Математические mm, cm и топографические pt уже практически не встретить на практике. Использовать их крайне не желательно!

2. % относительная единица измерения и рассчитывается относительно родительского элемента

1
2
3
4
5
6

p{
   font-size: 16px; 
}
p span{
   font-size: 50%; = 8px
}

3. em — относительная единица измерения и рассчитывается относительно родительского элемента

1
2
3
4
5
6

p{
   font-size: 16px; 
}
p span{
   font-size: 1.5em; = 16 * 1.5 = 24px
}

em может принимать дробное значение

4. rem — соответствует значению свойства font-size корневого элемента html.

1
2
3
4
5
6

html{
   font-size: 16px; 
}
p span{
   font-size: 1.5rem; = 16 * 1.5 = 24px
}

В браузерах по умолчанию 1rem = 16px.

5. vh

1vh = 1/100 высоты области просмотра

1
2
3

p{
   font-size: 5vh; = 5% от высоты области просмотра
}

6. vw

1wh = 1/100 ширины области просмотра