Единицы измерения в CSS
Абсолютные единицы измерения имеют постоянную размерность. Если говорить на простом языке, они всегда имеют тот же размер. Это сантиметры, миллиметры, дюйма и пиксели. И сантиметр всегда сантиметр, а десять сантиметров — всегда десять сантиметров. Если вы напишете в стиле «ширина элемента должно быть 10 пикселей» (или «width: 10px;»), то получите ширину 10 пикселей соответственно. Предполагаемый, конкретный результат.
А вот с относительными единицами все немного сложнее. Их, например, можно описывать с помощью процентов. И если вы напишете «ширина элемента должно быть 10 процентов» («width: 10%;»), то какой именно размер вы получите? Правильный ответ: «зависит от того, относительно чего измеряются эти 10 процентов». Потому такие единицы и называются относительными.
Они позволяют задавать размеры относительно размеров текста элемента, размеров определенного символа и даже измерений окна браузера пользователя — ширины или высоты. Такие единицы могут быть полезны для создания реагирующей или адаптивной верстки. Более подробно о них читайте в этой статье.
Теперь, когда мы познакомились с типами единиц измерения, давайте познакомимся уже с самими единицами измерения. Обратите внимание, в этой статье перечислены только единицы измерения, которые будут работать во всех современных браузерах. Существует целый ворох экспериментальных единиц измерения, которые работают только на некоторых браузерах.
Пять стратегий, как быть мотивированными к изучению английского языка
Абсолютные единицы измерения
Пиксели (px) — самая распространенная единица измерения в современном CSS. Один пиксель в CSS соответствует одному пикселю на экране устройства. Вернее, так это работало раньше. А после появления экранов высокого разрешения в современных смартфонах или ультрабуках, принцип вычисления немного изменился. Вы, вероятно, заметили, что изображения на современных смартфонах гораздо более четкие. Так происходит потому, что они способны отображать в пределах квадратного дюйма гораздо больше пикселей, чем у старых смартфонов. В одном пикселе могут поместиться четыре, девять или даже шестнадцать пикселей. Но сейчас в мире есть куча экранов с разной плотностью физических пикселей, поэтому в CSS описываются не реальные, а условные пиксели. На экранах с низкой плотностью их размер получается примерно друг к другу, а на экранах с повышенной плотностью один пиксель в CSS может соответствовать нескольким (четырем, девяти, шестнадцати) фактическим пикселям экрана. К тому же существуют принтеры, которые вообще не используют пиксели, но как-то должны печатать веб-страницы. Для таких случаев используется формула 1 пиксель = 1/96 дюйма.
Сантиметры (cm) и миллиметры (mm) — это единицы измерения, которые удобно применять при работе с таблицами стилей для печатных материалов. В случае применения для экранов, 1 сантиметр = 96 пикселей/2.54, а 1 миллиметр, соответственно, 1/10 сантиметра.
Дюймы (in) — единица измерения, распространенная в США. 1 дюйм = 2.54 сантиметра, а в случае экранов — 96 пикселей.
Пункты (pt) — 1/72 дюйма.
Пики (pc) — одна шестая дюйма или 12 пунктов.
Относительные единицы измерения
Эм (em) — единица измерения, позволяющая задавать размеры в соотношении к размерам шрифта. 1 ем соответствует текущему размеру шрифта. В случае применения единицы измерения в свойстве font-size используется наследуемый размер шрифта. Таким образом, font-size: 0.5em установит размер шрифта вдвое меньше подражаемого.
Современные методологии ведения проектов
Рем (rem) — единица измерения, аналогичная эмам, но в качестве исходной величины использует размер шрифта не текущего, а коренного элемента — то есть . Не рекомендуется применять для задания размеров шрифта на самом коренном элементе, так как в таком случае в качестве исходного значения будет использован размер шрифта браузера по умолчанию, который может быть разным для разных браузеров.
Проценты (%) — позволяет задавать размеры в долях от другой величины. Какая исходная величина используется — зависит от свойства. Например, в случае свойства font-size следует размер шрифта. Это означает, что свойство font-size 100% = 1em. Для описания размеров в качестве исходной величины может использоваться ширина страницы или определенного элемента. Но обратите внимание, что не все свойства, имеющие значение с единицами измерения позволяют задавать значения в процентах.
ch (читается как «си-эйч», от английского «character» — «буква», «символ») — единица измерения, в качестве исходной величины использующая ширину или высоту цифры 0, в зависимости от направления написания текста. Так, для традиционных для нас горизонтальных языков написание текстов используется ширина, для некоторых восточных языков будет использована высота. В случаях, когда размер цифры невозможно или непрактически считать, используются значения 0.5em и 1em для ширины и высоты соответственно.
ex (читается «экс») — единица измерения, использующая в качестве исходной величины высоту латинской буквы x. В большинстве случаев, соответствует высоте строчных букв шрифта.
vw (читается как «ви-даблю», от английского «viewport width» — «ширина окна просмотра») — единица измерения, позволяющая задавать размеры относительно ширины окна браузера пользователя. 1vw это 1% от ширины окна. Если ширина окна 1200 пикселей, то 1vw будет равна 12 пикселям, 10vw — 120 пикселям, а 100vw — полной ширине в 1200 пикселей.
vh (читается как «ви-эйч», от английского «viewport height» — «высота окна просмотра») — единица измерения, аналогичная vw, но в качестве исходной величины используется не ширина, а высота окна браузера.
vmin (читается «ви-мин», от английского «viewport mininum» — «минимум окна просмотра») — единица измерения, которая в качестве исходной величины использует меньшее из измерений окна браузера. В случаях, когда ширина больше высоты, эта единица измерения будет аналогична vh, а в других случаях — vv.
vmax (читается «ви-макс», от английского «viewport maximum» — «максимум окна просмотра») — аналогична vmin, но использует не меньшее, а большее из двух измерений.
В завершение
Единицы измерения играют немаловажную роль в каскадных таблицах, поэтому их нужно знать и понимать.
Хорошая новость состоит в том, что вам не придется использовать каждую единицу измерения во всех проектах. Если быть до конца откровенными из всех перечисленных в этом материале единиц, на практике вы будете использовать 5-7, особенно на ранних этапах вашей работы.
Но знать о каждой из них нужно так же, как и понимать, как они работают и к какому типу относятся. Чем больше будет появляться проектов вашему портфолио, тем сложнее будет задача, и тем более широкий арсенал инструментов вам понадобится.