Единицы измерения в CSS применяются для задания размеров элементов, расстояний, шрифтов и других свойств. Они подразделяются на абсолютные и относительные типы.

Лекция про пять основных единиц измерений: px, em, rem, fr, %.

Пиксели 'px'

Пиксель может быть физическим и CSS-пикселем.

Физический пиксель — это отдельная ячейка на матрице устройства. Например, если ширина экрана устройства составляет 480px, это означает, что по всей ширине расположено 480 неделимых ячеек, где 1px равен одной такой ячейке.

CSS-пиксель — это единица измерения в CSS, равная 1/96 дюйма. Один CSS-пиксель не всегда соответствует одной физической ячейке на экране. Это зависит от плотности экрана: чем больше физических пикселей на экране, тем выше его плотность и тем более детализированным будет изображение.

.content__main {
  width: 200px;
  height: 100px;
  background-color: FFA181;
  font-size: 24px;
  padding: 10px;
  margin: 20px;
}

Размеры шрифта 'rem'

Единица измерения rem зависит от размера шрифта корневого элемента документа, обычно это тег. Значение 1rem соответствует размеру шрифта корневого элемента. Например, если в теге установлен шрифт размером 16px, то для всех вложенных элементов, где указано 'font-size: 1.5rem;', размер шрифта будет равен 24px.

.body {
  font-size: 16px;
}
h1 {
  font-size: 2rem; /* 2rem будет равно 32 пикселям (16px * 2) */
}
p {
  font-size: 1.5rem; /* 1.5rem будет равно 24 пикселям (16px * 1.5) */
}

Размеры шрифта 'em'

Единица измерения em задает размер шрифта, равный размеру шрифта родительского элемента. Например, если у родительского элемента размер шрифта составляет '16px', то 'font-size: 1.5em;' установит размер шрифта дочернего элемента на '24px'.

h1 {
  font-size: 2em;
  color: #FF0000;
}
p {
  font-size: 1.2em;
  color: #000000;
  line-height: 1.5em;
}

Проценты '%'

Проценты определяют размер относительно родительского элемента. Если родительский элемент равен 100%, то 'width: 50%;' установит ширину дочернего элемента на половину ширины родительского элемента.

.container {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}
.box {
  width: 50%;
  height: 200px;
  background-color: blue;
  margin: 20px auto;
}

Контейнер занимает 80% ширины родительского элемента, в то время как класс box занимает 50% ширины контейнера.

Доли 'fr'

Доля свободного пространства (fr) — это относительная единица измерения, используемая в CSS Grid для распределения доступного пространства между ячейками. Свободное пространство в родительском элементе делится на равные доли (fr), и дочерние элементы распределяют это пространство между собой.

Небольшой пример:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 10px;
}