Что такое px, rem, em, fr, %
- 9 июня 2023
Единицы измерения в CSS используют для определения размеров элементов, расстояний, шрифтов и других свойств. Они делятся на абсолютные и относительные.
Абсолютные единицы измерения привязаны к настоящим физическим размерам. Среди них пиксели, сантиметры, миллиметры, дюймы.
Относительные единицы измерения описывают значения, которые зависят от других значений. Среди них em, rem, vh, ex и другие единицы измерения.
В статье расскажем про пять единиц измерения: px, em, rem, fr,%.
Для чего использовать
px
- Задаёт ширину и высоту элементов:
width: 200px;,height: 100px;. - Задаёт отступы и поля:
margin: 10px;,padding: 20px;. - Задаёт размер шрифта:
font-size: 16px;.
rem и em
- Размер шрифта:
font-size: 1.5rem;,font-size: 1.2em;. - Отступы и полей с учетом размера шрифта:
margin: 0.5rem;,padding: 0.8em;.
%
- Размер элементов относительно размеров родительского элемента:
width: 50%;,height: 75%;. - Отступы и поля относительно размеров родительского элемента:
margin: 10%;,padding: 5%;.
fr
- Распределение пространства между ячейками сетки:
grid-template-columns: 1fr 2fr;— распределит доступное пространство между двумя колонками в соотношении 1:2. - Распределение пространства между элементами в гибком контейнере:
flex: 1fr;— распределит доступное пространство между элементами в контейнере.
Подробнее о каждой единице
Пиксели px
Пиксель бывает физическим и CSS-пикселем.
Физический пиксель — это пиксель на матрице девайса. Например, когда мы говорим, что ширина экрана устройства 480px, то подразумеваем, что по всей ширине находится 480 неделимых ячеек, где 1px равен одной ячейке.
CSS-пиксель — это единица измерения CSS, равная 1/96 части дюйма. Один пиксель не всегда равен одной ячейке на экране. Это зависит от плотности экрана, чем больше физических пикселей на экране, тем выше его плотность и тем детальнее выводимое на него изображение.
Размер от шрифта root rem
Единица измерения, которая зависит от размера шрифта корневого элемента в документе — обычно <html>. Значение 1rem соответствует размеру шрифта корневого элемента. Например, если в теге <html> задан шрифт 16px, то для всех вложенных в него элементов font-size: 1.5rem; установит размер шрифта в 24px.
em
Единица измерения, которая задаёт размер шрифта равный родительскому элементу. Например, если у родительского элемента размер шрифта равен 16px, то font-size: 1.5em; установит размер шрифта дочернего элемента в 24px.
Для <h1> значение 2em означает, что размер шрифта будет в два раза больше, чем размер шрифта элемента-родителя.
Проценты %
Проценты задают размер относительно родительского элемента. Родительский элемент равен 100%, тогда width: 50%; будет равна половине ширины родительского элемента.
Контейнер занимает 80% ширины родительского элемента, а блок-коробка занимает 50% ширины контейнера.
Доли fr
Доля свободного пространства — относительная единица измерения, которая используется в CSS Grid для распределения доступного пространства между ячейками. Свободное пространство в родительском элементе делится на равные доли — fr, а дочерние элементы распределяют пространство между собой. На примере мы покажем, как пространство делится между элементами.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.