Единицы измерения размеров

Подкаст 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 используется не только для цифрового контента, но и для стилизации печатного контента. Абсолютные длины могут действительно пригодиться при разработке дизайна для печати.

Относительные длины

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

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

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

Единицы относительно видового экрана

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

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, в медиазапросе и предоставление изображения с более высоким разрешением.

Проверьте свое понимание

Проверьте свои знания о размерах

Ресурсы

• Значения и единицы измерения CSS, уровень 4
• Размеры и единицы измерения на MDN
• Все об Эмс
• Объяснитель процентов