Вход

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

Единицы измерения в 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 ширины области просмотра

14 января 2020 /

1580 Views /

0 Comment
Ilya Web developer
Author

«Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете.»Martin Golding

Отправить ответ

  Получать уведомления о новых комментариях  
Уведомлять