Подкаст 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 .
Числа также можно использовать в следующих местах:
- При установке значений для фильтров:
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 .
Размеры и длина
Если вы присоедините единицу к числу, оно станет измерением. Например, 1rem — это размерность. В этом контексте единица измерения, присоединенная к числу, в спецификациях называется маркером измерения. Длины — это размеры, относящиеся к расстоянию , и они могут быть абсолютными или относительными.
Абсолютные длины
Все абсолютные длины вычисляются по одной и той же базе, что делает их предсказуемыми, где бы они ни использовались в CSS. Например, если вы используете cm для определения размера элемента, а затем распечатываете, результат будет точным, если вы сравните его с линейкой.
div {
width: 10cm;
height: 5cm;
background: black;
}
Если вы распечатаете эту страницу, div будет напечатан в виде черного прямоугольника размером 10x5 см. Имейте в виду, что CSS используется не только для цифрового контента, но и для стилизации печатного контента. Абсолютные длины могут действительно пригодиться при разработке дизайна для печати.
| Единица | Имя | Эквивалентно |
|---|---|---|
| см | Сантиметры | 1 см = 96 пикселей/2,54 |
| мм | Миллиметры | 1 мм = 1/10 1 см |
| вопрос | Четверть миллиметра | 1Q = 1/40 1 см |
| в | Дюймы | 1 дюйм = 2,54 см = 96 пикселей |
| ПК | Пикас | 1 шт = 1/6 1 дюйма |
| пт | Очки | 1 точка = 1/72 1 дюйма |
| пикселей | Пиксели | 1 пиксель = 1/96 дюйма |
Относительные длины
Относительная длина рассчитывается по базовому значению, аналогично проценту. Разница между ними и процентами заключается в том, что вы можете контекстно определять размер элементов. Это означает, что в CSS есть такие единицы измерения, как ch , которые используют размер текста в качестве основы, и vw , который основан на ширине области просмотра (окна вашего браузера). Относительная длина особенно полезна в Интернете из-за ее отзывчивости.
Единицы измерения относительно размера шрифта
CSS предоставляет полезные единицы измерения, которые зависят от размера элементов отображаемой типографики, например, размер самого текста (единицы em ) или ширина символов гарнитуры (единицы ch ).
| единица | относительно: |
|---|---|
| Эм | Относительно размера шрифта, т. е. 1,5em, будет на 50 % больше, чем базовый вычисленный размер шрифта его родителя. (Исторически высота заглавной буквы «М»). |
| бывший | Эвристика, позволяющая определить, следует ли использовать высоту x, букву «x» или `.5em` в текущем вычисленном размере шрифта элемента. |
| кепка | Высота заглавных букв в текущем вычисленном размере шрифта элемента. |
| ч | Среднее продвижение символов узкого глифа в шрифте элемента (представленного глифом «0»). |
| IC | Среднее продвижение символов глифа полной ширины в шрифте элемента, представленное глифом «水» (идеограф воды CJK, U+6C34). |
| рем | Размер шрифта корневого элемента (по умолчанию — 16 пикселей). |
| левый | Высота строки элемента. |
| рлх | Высота строки корневого элемента. |
Единицы относительно видового экрана
Вы можете использовать размеры области просмотра (окна браузера) в качестве относительной основы. Эти единицы делят доступное пространство области просмотра.
| единица | относительно |
|---|---|
| Фольксваген | 1% ширины области просмотра. Люди используют это устройство, чтобы выполнять интересные трюки со шрифтами, например, изменять размер шрифта заголовка в зависимости от ширины страницы, поэтому при изменении размера пользователем размер шрифта также будет меняться. |
| вх | 1% высоты области просмотра. Вы можете использовать это для упорядочения элементов в пользовательском интерфейсе, например, если у вас есть панель инструментов в нижнем колонтитуле. |
| ви | 1% размера области просмотра по встроенной оси корневого элемента. Ось относится к режимам записи. В режимах горизонтального письма, таких как английский, строковая ось горизонтальна. В режимах вертикального письма, таких как некоторые японские шрифты, линейная ось проходит сверху вниз. |
| В.Б. | 1% размера области просмотра на оси блока корневого элемента. Для оси блока это будет направленность языка. Языки LTR, такие как английский, будут иметь вертикальную ось блока, поскольку читатели на английском языке анализируют страницу сверху вниз. Режим вертикальной записи имеет горизонтальную ось блока. |
| вмин | 1% меньшего размера области просмотра. |
| vмакс | 1% от большего размера области просмотра. |
div {
width: 10vw;
}
p {
max-width: 60ch;
}
В этом примере div будет составлять 10% ширины области просмотра, поскольку 1vw составляет 1% ширины области просмотра . Элемент p имеет max-width 60ch , что означает, что он не может превышать ширину 60 символов «0» в рассчитанном шрифте и размере.
Разные единицы
Существуют и другие единицы измерения, предназначенные для работы с определенными типами значений.
Угловые единицы
В модуле цвета мы рассмотрели угловые единицы , которые полезны для определения значений градусов, например оттенка в 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');
}
}
Единицы разрешения
В предыдущем примере значение min-resolution составляет 192dpi . Единица dpi означает количество точек на дюйм . Полезным контекстом для этого является обнаружение экранов с очень высоким разрешением, таких как дисплеи Retina, в медиазапросе и предоставление изображения с более высоким разрешением.
Проверьте свое понимание
Проверьте свои знания о размерах
Какие из следующих размеров являются допустимыми?
Чем отличаются абсолютные и относительные единицы?
Единицы просмотра являются абсолютными.