День 1964. #Шпаргалка #CSS
Единицы Размеров в CSS. Окончание
Начало. Абсолютные единицы

Относительные единицы
Значение относительной единицы зависит от размера чего-то ещё. Допустим, у нас есть элемент <div> с абсолютным значением высоты 200 пикселей. Эта высота никогда не изменится. Но если задать элементу относительную ширину в 50%, он займёт половину ширины страницы (либо половину ширины своего родителя). Относительное число действует как множитель для вычисления значения, в зависимости от того, относительно какого размера мы считаем.

1. Проценты
% - относительно размера родительского элемента.
Используются, когда нет другого контекста для задания размера.

2. Относительно шрифта
- em – элемент (относительно размера шрифта родительского элемента)
- rem – корневой элемент (относительно размера шрифта элемента <html>)
Аналогично:
- ch и rch – ширина символа (отличается для каждого шрифта и у разных символов, кроме моноширинных шрифтов)
- lh и rlh – высота строки
- cap и rcap – высота заглавной буквы
- ic и ric – ширина иероглифа
- ex и rex – ширина буквы X.
Большинство из этого требуется только для типографии. Однако, хорошей практикой является задавать размер шрифта в пикселях для элемента <html>, а для всех остальных элементов использовать относительные em и rem:

html {
  /* Наследуется всеми элементами */
  font-size: 18px; 
}
.parent {
  /* Изменяется при смене размера в `html` */
  font-size: 1.1rem;
}
.child {
  /* Изменяется при смене размера в `.parent` */
  font-size: 0.9em; 
}

3. Относительно области просмотра (viewport – видимая часть страницы)
Эти величины всегда считаются относительно размеров страницы.
- vh и vw – высота и ширина (100vh – высота экрана)
- vmin и vmax – минимум и максимум между vh и vw соответственно
- lvh и lvw – «большие» высота и ширина (в полноэкранном режиме)
- lvb и lvi – эквиваленты lvh и lvw для блока и строки
- svh и svw – «маленькие» высота и ширина (когда отображаются UI браузера и экранная клавиатура)
- svb и svi – эквиваленты svh и svw для блока и строки
- dvh и dvw – «динамические» высота и ширина (изменяются, например, при отображении/скрытии экранной клавиатуры)
- dvb и dvi – эквиваленты dvh и dvw для блока и строки
- dvmin и dvmax – минимум и максимум между dvh/dvb и dvw/dvi соответственно.

4. Относительно контейнера
Эти величины считаются в контейнер-запросах относительно размеров соответствующего контейнера.
- cqw – ширина контейнера (100cqw – полная ширина)
- cqh – высота контейнера
- cqi – ширина строкового контейнера
- cqb – ширина блокового контейнера
- cqmin и cqmax – минимум или максимум между cqi и cqb

Например,

.parent {
  container-type: inline-size;
}
.child {
  width: 100%;

  @container (width > 30ch) {
    .child {
      width: 50cqi;
    }
  }
}

Когда родительский элемент блока child превысит ширину в 30 символов, он станет занимать вместо полной ширины контейнера только половину его ширины.

Источник: https://css-tricks.com/css-length-units/