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

Подкаст 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 для определения размера элемента, а затем печатаете, он должен быть точным, если вы сравните его с линейкой. Обратите внимание, что физические единицы, такие как cm и in , не будут надежно отображаться при этих размерах на экранах из-за различий в размерах пикселей. Физические единицы лучше всего использовать для таблиц стилей печати, где они будут более надежными.

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 означает dots per inch . Полезным контекстом для этого является обнаружение экранов с очень высоким разрешением, таких как дисплеи Retina в медиа-запросе и предоставление изображения с более высоким разрешением.

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

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

Ресурсы

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