Какие знаешь CSS Units

«Какие знаешь CSS Units» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Абсолютные единицы:

  • px (пиксели) — фиксированный размер, не зависит от окружения.
  • pt (пункты) — 1pt = 1/72 дюйма, часто для печати.
  • in, cm, mm — дюймы, сантиметры, миллиметры (редко в вебе).

Относительные единицы:

  • % — процент от размера родителя.
  • em — относительно размера шрифта родителя (наследуется).
  • rem — относительно размера шрифта корневого элемента (<html>).
  • vw, vh — 1% от ширины/высоты viewport.
  • vmin, vmax — 1% от меньшего/большего размера viewport.
  • ch — ширина символа "0" текущего шрифта.

Пример:

.container {
  width: 80%; /* 80% от родителя */
  font-size: 1.2rem; /* 1.2 × размер шрифта <html> */
  padding: 2em; /* 2 × текущий font-size */
}