CSS Academy · Урок

Абсолютные единицы: px, pt, cm

Изучите, когда использовать фиксированные абсолютные единицы: пиксели, пункты и сантиметры.

«Абсолютные единицы: px, pt, cm» — бесплатный урок CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

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

Единицы CSS делятся на две категории: абсолютные (фиксированные измерения реального мира) и относительные (масштабируются относительно чего-либо ещё). Абсолютные единицы — это физические измерения, не зависящие от устройства.

px — Пиксели

Пиксель (px) — самая часто используемая абсолютная единица на экранах. На стандартных дисплеях 1px = 1 пиксель устройства. На экранах с высоким DPI (Retina) CSS-пиксели соответствуют нескольким пикселям устройства, благодаря чему визуальный размер элементов сохраняется.

<button class="button">10px 20px padding</button>

pt — Пункты

Пункт (pt) — единица из полиграфического дизайна: 1pt = 1/72 дюйма. В CSS 1pt = 4/3px (примерно 1,33px). В основном используется в таблицах стилей печати для типографики.

<p class="print-text">This text is sized in points (12pt), the unit used in print stylesheets.</p>

cm, mm, in — Физические единицы

CSS поддерживает сантиметры (cm), миллиметры (mm) и дюймы (in). Они уместны в контексте печати, но ненадёжны на экранах, поскольку DPI экранов различается.

<div class="page">A4-width page (21cm), used for print layouts</div>

px на экранах: практика

Для веб-дизайна, ориентированного на экраны, px — единственная практичная абсолютная единица. Тем не менее использовать px для размеров шрифта не рекомендуется, поскольку это переопределяет пользовательские настройки размера шрифта в браузере.

Соотношение пикселей устройства

Современные дисплеи имеют соотношение пикселей устройства (DPR) > 1. Экран Retina с масштабом 2x отображает 2 пикселя устройства на каждый CSS-пиксель. Поэтому изображениям с высоким DPI нужны размеры в 2 или 3 раза больше отображаемых.

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><rect width='400' height='300' fill='%23ff6347'/><circle cx='200' cy='150' r='100' fill='%231e90ff'/></svg>" alt="sample image" />

Когда использовать px

Используйте px для:

ширины границ (1px выглядит чётко)
теней и преобразований
точек перехода медиазапросов (хотя точки перехода на основе em надёжнее)
фиксированных элементов интерфейса, которым требуется точный контроль в пикселях

Когда NOT следует использовать px для типографики

Задание font-size: 16px для html или body во многих браузерах переопределяет настройку доступности пользователя. Вместо этого используйте rem относительно размера шрифта браузера по умолчанию.

Q — Четверть миллиметра

Единица q равна 1/4 миллиметра. Она используется в японской типографике для печати, когда требуется тонкая настройка текста. В обычном веб-дизайне применяется редко.

PC — Пики

Пика (pc) равна 12 пунктам или 1/6 дюйма. Как и пункты, пики относятся к единицам печати и редко нужны для цифровых экранов.

Абсолютные единицы в таблицах стилей печати

Таблицы стилей печати — основной оправданный случай использования абсолютных единиц в CSS. Физические единицы гарантируют точные размеры напечатанной страницы на бумаге.

<div class="print-body">
    <p class="page-break">Section one (page breaks after this when printed)</p>
    <p>Section two</p>
  </div>

Быстрая проверка

Какая абсолютная единица CSS эквивалентна 1/72 дюйма?

Итоги

Абсолютные единицы — это фиксированные измерения, не зависящие от родительских элементов. px — практичная единица для экранов. Физические единицы (pt, cm, in) используются в таблицах стилей печати. Не используйте px для типографики — это переопределяет пользовательские настройки размера шрифта. Вместо этого используйте rem.

Часто задаваемые вопросы

Урок «Абсолютные единицы: px, pt, cm» бесплатный?

Да — полный текст урока «Абсолютные единицы: px, pt, cm» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Абсолютные единицы: px, pt, cm»?

Изучите, когда использовать фиксированные абсолютные единицы: пиксели, пункты и сантиметры. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Абсолютные единицы: px, pt, cm»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к CSS Academy