CSS Абсолютные Единицы Измерения: px, cm, pt и Их Применение

[hannadev]

Абсолютные единицы измерения в CSS — это фиксированные значения, которые не меняются от контекста страницы. Они включают px, cm, mm, in, pt и pc. Такие единицы полезны, когда нужен точный размер независимо от экрана или родителя.

Они решают проблемы с предсказуемостью: элемент всегда выглядит одинаково. В веб-дизайне чаще берут px, а для печати — cm или pt. Давайте разберём, как это работает на практике.

Что такое абсолютные единицы и зачем они нужны

Абсолютные единицы в CSS имеют фиксированный размер, привязанный к физическим меркам или экрану. Они не зависят от родительских элементов, шрифтов или viewport. Например, 1cm всегда равен примерно 37.8px на стандартном экране, но точно 1 сантиметр при печати.

Это отличает их от относительных вроде em или %. Абсолютные хороши для точных макетов: логотипы, иконки, где размер не должен ‘плавать’. На разных устройствах px может слегка варьироваться из-за плотности пикселей, но cm, mm, in работают стабильно для print-стилей. В итоге, вы получаете контроль, особенно в смешанных медиа.

Вот основные абсолютные единицы с примерами:

• px (пиксели): базовая единица экрана, 1px = 1/96 дюйма. Идеально для веба: width: 200px;.
• cm (сантиметры): 1cm ≈ 37.8px. Для печати: height: 5cm;.
• mm (миллиметры): 1mm = 0.1cm ≈ 3.78px. Тонкие отступы: margin: 10mm;.
• in (дюймы): 1in = 2.54cm = 96px. Редко в вебе, но точно для принтеров.
• pt (пункты): 1pt = 1/72 дюйма ≈ 1.33px. Типографика: font-size: 12pt;.
• pc (пики): 1pc = 12pt ≈ 16px. Для макетов: width: 6pc;.

Единица	Соотношение	Пример в CSS	Типичное применение
px	1/96 in	width: 100px	Экраны, иконки
cm	1cm	height: 2cm	Печать
mm	0.1cm	margin: 5mm	Точные отступы
in	2.54cm	width: 1in	Американский print
pt	1/72 in	font-size: 10pt	Шрифты
pc	12pt	line-height: 2pc	Типографика

Как работают px и их связь с другими единицами

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

Связь с другими жёсткая: 1in = 96px = 2.54cm = 72pt = 6pc. Если задаёте font-size: 72pt;, это ровно 1 дюйм на печати. В браузере pt преобразуется в px по тому же соотношению. Проблема: на низком DPI экранах cm может казаться больше, но для веба px выигрывает стабильностью.

Нюанс: Абсолютные единицы идеальны для фиксированных блоков, но тестируйте на печать — там они ‘оживают’ по-настоящему.

Примеры преобразований:

1. 1cm = 37.8px (при 96dpi).
2. 12pt = 16px.
3. 1pc = 16px (полезно для заголовков).

.print-box {
  width: 10cm;
  height: 5cm;
  font-size: 14pt;
}
@media print {
  .print-box { /* Точно 10x5 см на бумаге */ }
}

Когда выбрать абсолютные единицы вместо относительных

Абсолютные берут, когда относительные подводят: фиксированные баннеры, PDF-генерация, print-стили. Например, в отчётах width: 21cm; идеально для A4. Относительные % или vw меняются, а абсолютные — нет.

В реальном проекте: логотип 300px не ‘сожмётся’ на мобильном, в отличие от 50%. Но для responsive лучше комбинировать. Минус: на HiDPI экранах 1px физически меньше, но CSS-px нормализует это через device-pixel-ratio.

Сравнение сценариев:

Сценарий	Абсолютные (px/cm)	Относительные (%, vw)	Почему выбрать
Иконка	width: 48px	width: 5vw	Фиксированный размер
Print	height: 29.7cm	height: 100%	Точная печать
Шрифт	font-size: 16px	font-size: 1rem	Базовый контроль
Баннер	width: 960px	width: 100vw	Стандартный макет

Важно: px — не совсем ‘абсолютны’ на всех устройствах, но ближе всех к этому.

Таблица соотношений и примеры кода для практики

Соотношения фиксированы: возьмите линейку и проверьте height: 1in; — на печати ровно дюйм. В CSS3 добавили Q (1/4 mm), но она редкая.

Практика показывает: для веба 80% — px, 20% — pt для шрифтов. Cm/mm — для @media print. Это даёт универсальность без хаоса от rem/em в сложных вложенностях.

Полная таблица соотношений (при 96dpi):

Единица	px эквивалент	Физический размер	Код-пример
1px	1px	~0.026cm	div {width: 100px;}
1cm	37.8px	1cm	div {width: 1cm;}
1mm	3.78px	0.1cm	p {margin: 1mm;}
1in	96px	2.54cm	img {height: 1in;}
1pt	1.33px	~0.035cm	h1 {font-size: 24pt;}
1pc	16px	~0.423cm	section {width: 3pc;}

Пример полного стиля:

.fixed-element {
  position: absolute;
  width: 15cm;
  height: 10cm;
  border: 2pt solid black;
  font-size: 1pc;
  padding: 5mm;
}

Абсолютные единицы в печати и HiDPI-экранах

В print-стилях абсолютные сияют: page-size: A4; с width: 21cm;. Браузеры точно конвертируют в миллиметры. На HiDPI (Retina) px масштабируется автоматически — 1 CSS-px = несколько физических.

Осталось за кадром: новые единицы вроде q (0.25mm) и их поддержка. Подумайте, как комбинировать с container queries в CSS4 для гибридных макетов. Тестируйте на реальных принтерах — там абсолютные единицы показывают характер.