Единицы измерения¶

В этом модуле вы узнаете, как определять размеры элементов с помощью CSS, работая с гибкой средой Интернета.

CSS подкаст

008: Единицы измерения

Перевод на русскийАнглийский оригинал

Веб — это отзывчивая среда, но иногда для улучшения общего качества интерфейса необходимо контролировать его размеры. Хорошим примером этого является ограничение длины строк для улучшения читаемости. Как это сделать в такой гибкой среде, как веб?

Для этого случая можно использовать единицу ch, которая равна ширине символа "0" в отрисованном шрифте при его расчетном размере. Эта единица позволяет ограничить ширину текста с помощью единицы, предназначенной для определения размера текста, что, в свою очередь, обеспечивает предсказуемость управления независимо от размера этого текста. Единица ch — одна из нескольких единиц, которые полезны в специфических контекстах, как в данном примере.

Числа¶

Числа используются для определения opacity, line-height и даже для значений цветовых каналов в rgb. Числа представляют собой целые числа без единиц измерения (1, 2, 3, 100) и десятичные (.1, .2, .3).

Смысл чисел зависит от их контекста. Например, при определении line-height число представляет собой отношение, если оно задано без вспомогательной единицы измерения:

p {
    font-size: 24px;
    line-height: 1.5;
}

В данном примере 1,5 равно 150% от вычисленного пиксельного размера шрифта элемента p. Это означает, что если p имеет font-size равный 24px, то высота строки будет вычислена как 36px.

Для line-height лучше не указывать единицы измерения, а использовать безразмерное значение. Как вы узнали из модуля inheritance module, font-size может быть унаследован. При определении line-height без единицы измерения высота строки сохраняется относительно размера шрифта. Это обеспечивает лучшее восприятие, чем, скажем, line-height: 15px, которая не будет изменяться и может выглядеть странно при определенных размерах шрифта.

Числа также могут использоваться в следующих местах:

При задании значений для фильтров: filter: sepia(0.5) применяет к элементу 50% фильтр сепии.
При задании непрозрачности: opacity: 0.5 применяет 50% непрозрачности.
В цветовых каналах: rgb(50, 50, 50), где для задания значения цвета допустимы значения 0-255. См. урок "Цвет".
Для преобразования элемента: transform: scale(1.2) масштабирует элемент на 120% от его начального размера.

Проценты¶

При использовании процентов в CSS необходимо знать, как вычисляется процент. Например, width вычисляется как процент от доступной ширины родительского элемента.

div {
    width: 300px;
    height: 100px;
}

div p {
    width: 50%;
}

В приведенном примере ширина div p равна 150px, предполагая, что в макете используется стандартное значение box-sizing: content-box.

Если задать margin или padding в процентах, то они будут представлять собой часть ширины родительского элемента, независимо от направления.

div {
    width: 300px;
    height: 100px;
}

div p {
    margin-top: 50%; /* calculated: 150px */
    padding-left: 50%; /* calculated: 150px */
}

В приведенном выше фрагменте оба значения margin-top и padding-left будут вычислены как 150px.

div {
    width: 300px;
    height: 100px;
}

div p {
    width: 50%; /* calculated: 150px */
    transform: translateX(10%); /* calculated: 15px */
}

Если значение transform задано в процентах, то оно основывается на элементе с заданным преобразованием. В данном примере элемент p имеет значение translateX, равное 10%, и width, равное 50%. Сначала вычисляем, какой будет ширина: 150px, так как она составляет 50% от ширины родителя. Затем отнимите 10% от 150px, что составит 15px.

Свойство transform позволяет изменять внешний вид и положение элемента путем его поворота, перекоса, масштабирования и трансляции. Это можно делать как в двухмерном, так и в трехмерном пространстве.

Размеры и длины¶

Если к числу присоединить единицу измерения, то оно становится размерностью. Например, 1rem — это размерность. В данном контексте единица, присоединяемая к числу, называется в спецификациях маркером измерения. Длина — это измерение, относящееся к расстоянию, которое может быть абсолютным или относительным.

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

Все абсолютные длины приводятся к одному и тому же основанию, что делает их предсказуемыми, где бы они ни использовались в CSS. Например, если вы используете cm для определения размера элемента, а затем выводите его на печать, он должен быть точным, если сравнивать его с линейкой.

div {
    width: 10cm;
    height: 5cm;
    background: black;
}

Если распечатать эту страницу, то div будет иметь вид черного прямоугольника размером 10x5 см. Не забывайте, что CSS используется не только для цифрового контента, но и для стилизации печатных материалов. Абсолютная длина может оказаться очень полезной при разработке дизайна для печати.

Единица	Название	Эквивалентно
cm	Сантиметры	`1cm = 96px/2.54`
mm	Миллиметры	`1mm = 1/10th of 1cm`
Q	Четвертьмиллиметры	`1Q = 1/40th of 1cm`
in	Дюймы	`1in = 2.54cm = 96px`
pc	Пики	`1pc = 1/6th of 1in`
pt	Пункты	`1pt = 1/72th of 1in`
px	Пиксели	`1px = 1/96th of 1in`

Относительная длина¶

Относительная длина рассчитывается по отношению к базовому значению, подобно процентам. Разница между ними и процентами заключается в том, что можно контекстно определять размеры элементов. Это означает, что в CSS существуют такие единицы измерения, как ch, использующие в качестве основы размер текста, и vw, основанные на ширине области просмотра (окна браузера). Относительные размеры особенно полезны в Интернете из-за его отзывчивой природы.

Относительные единицы измерения размера шрифта¶

CSS предоставляет полезные единицы измерения, которые относятся к размерам элементов типографики, таких как размер самого текста (единицы em) или ширина символов шрифта (единицы ch).

Единица	Эквивалентно
em	Относительно размера шрифта, т. е. 1.5em будет на 50% больше базового вычисленного размера шрифта его родителя. (Исторически — высота заглавной буквы "М").
ex	Эвристика, определяющая, использовать ли в текущем вычисленном размере шрифта элемента x-height, букву "x" или .5em.
cap	Высота прописных букв в текущем вычисленном размере шрифта элемента.
ch	Среднее значение символьного роста узкого глифа в шрифте элемента (представленного глифом "0").
ic	Среднее значение символьного роста глифа полной ширины в шрифте элемента, представленного глифом "水" (идеограмма воды CJK, `U+6C34`).
rem	Размер шрифта корневого элемента (по умолчанию 16px).
lh	Высота линии элемента.
rlh	Высота линии корневого элемента.

Относительные единицы измерения области просмотра¶

В качестве относительных единиц можно использовать размеры области просмотра (окна браузера). Эти единицы делят на части доступное пространство области просмотра.

Единица	Эквивалентно
vw	1% от ширины области просмотра. С помощью этой единицы измерения можно выполнять различные трюки со шрифтами, например, изменять размер шрифта заголовка в зависимости от ширины страницы, чтобы при изменении размера страницы шрифт также изменялся.
vh	1% от высоты области просмотра. Это можно использовать для расположения элементов в пользовательском интерфейсе, например, если у вас есть панель инструментов нижнего колонтитула.
vi	1% от размера области просмотра по оси инлайна корневого элемента. Ось относится к режимам письма. В горизонтальных шрифтах, таких как английский, ось инлайна расположена горизонтально. При вертикальном начертании, как в некоторых японских шрифтах, ось инлайна проходит сверху вниз.
vb	1% от размера области просмотра по оси блока корневого элемента. Для оси блока это направление языка. Языки LTR, такие как английский, имеют вертикальную ось блока, поскольку читатели английского языка анализируют страницу сверху вниз. Вертикальный способ письма имеет горизонтальную ось блока.
vmin	1% от меньшего размера области просмотра.
vmax	1% от большего размера области просмотра.

div {
    width: 10vw;
}

p {
    max-width: 60ch;
}

В данном примере div будет занимать 10% ширины области просмотра, поскольку 1vw составляет 1% ширины области просмотра. Элемент p имеет max-width, равный 60ch, что означает, что он не может превышать ширину 60 символов "0" в рассчитанном шрифте и размере.

Благодаря использованию относительных единиц измерения, таких как em или rem, а не абсолютных, например px, размер текста может соответствовать предпочтениям пользователя. Это может быть размер системного шрифта или размер шрифта родительского элемента, например, <body>. Базовый размер em — это родительский размер элемента, а базовый размер rem — это базовый размер шрифта документа.

Если вы не определили font-size для элемента html, то при использовании относительных размеров, таких как em и rem, будет учитываться этот предпочитаемый пользователем системный размер шрифта. Если для определения размера текста используются единицы px, это предпочтение будет игнорироваться.

Разные единицы¶

Существуют и другие единицы, которые были определены для работы с определенными типами величин.

Угловые единицы¶

В модуле Цвет мы рассмотрели угловые единицы, которые полезны для определения градусных значений, таких как оттенок в hsl. Они также полезны для поворота элементов в функциях преобразования.

div {
    width: 150px;
    height: 150px;
    transform: rotate(60deg);
}

Используя единицу измерения угла deg, можно повернуть div на 90° относительно его центральной оси.

div {
    background-image: url('a-low-resolution-image.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 192dpi) {
    div {
        background-image: url('a-high-resolution-image.jpg');
    }
}

К другим единицам измерения угла относятся rad (радианы), grad (градианы) и turn (оборот), представляющие собой часть угла, где 1 оборот = 360deg, а 0,5 оборота = 180deg.

Единицы разрешения¶

В предыдущем примере значение min-resolution равно 192dpi. Единица dpi означает точек на дюйм. Полезным контекстом для этого является обнаружение в медиазапросе экранов с очень высоким разрешением, таких как дисплеи Retina, и выдача изображения с более высоким разрешением.

Ресурсы¶

Источник: Sizing Units