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

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

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

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

Числа¶

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

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

1
2
3
4

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

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

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

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

Проценты¶

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

1
2
3
4
5
6
7
8

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

div p {
    width: 50%;
}

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

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

1
2
3
4
5
6
7
8
9

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

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

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

1
2
3
4
5
6
7
8
9

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.

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

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

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

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

1
2
3
4
5

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

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

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

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

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

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

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

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

1
2
3
4
5
6
7

div {
    width: 10vw;
}

p {
    max-width: 60ch;
}

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

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

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

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

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

1
2
3
4
5

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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');
    }
}

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

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

Ресурсы¶

• CSS Spec Values and Units Level 4
• Размер и единицы измерения на MDN
• Всё об эммиволах
• Объяснение по процентам

Источник: Sizing Units

Комментарии