Единицы измерений в CSS

Единицы измерений в CSS - это важная часть кода, которая используется при верстке страницы постоянно.

Они бывают абсолютными и относительными.

Абсолютные единицы измерений CSS

Абсолютные единицы измерений имеют фиксированное значение, часто зависящее от друг от друга, и привязаны к некоторым физическим измерениям. Они полезны в том случае, когда известно средство вывода. Абсолютные единицы состоят из физических единиц (дюймов, см, мм, пунктов, пик) и единицы визуального угла (px):

Из всех этих единиц чаще всего используют пиксели или пункты. Первые - потому что устройства просмотра (мониторы, планшеты, телефоны и даже телевизоры) имеют разрешение именно в пикселях. А вторые - потому что масса текстовых редакторов позволяют набирать текст именно в пунктах.

Самое интересное, что все остальные единицы можно представить, оттолкнувшись от пикселей:

• 1mm (мм) = 3.8px
• 1cm (см) = 38px
• 1pt (типографский пункт) = 4/3 px
• 1pc (типографская пика) = 16px

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

Цитата из спецификации:

Опорный пиксель представляет собой угол зрения одного пикселя на устройстве с плотностью пикселей 96dpi и расстоянием от считывателя длины руки. Таким образом, при номинальной длине руки 28 дюймов угол зрения составляет около 0,0213 градусов. Для чтения на расстоянии вытянутой руки 1px соответствует примерно 0,26 мм (1/96 дюйма).

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

Посмотреть файл примера в новой вкладке.

Относительные единицы измерений

Относительные единицы измерений применяются в верстке намного чаще. Они определяют размер какого-либо элемента относительно другого размера. Таблицы стилей, которые используют относительные единицы, легче масштабируются из одной среды вывода в другую.

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

Начнем с настроек браузера и единицы rem (root em)

Это единица, соответствующая размеру "корневого" элемента, а именно - тега html. Для него не так часто задаются стили, поэтому размер берется из настроек браузера.

В каждом браузере есть настройки шрифтов по умолчанию. Посмотреть их в Хроме можно, нажав в меню "Настройки" на ссылку "расширенные настройки". В открывшемся окне задается тип шрифта по умолчанию для различных семейств шрифта (с засечками, без засечек и моноширинный), а также его размер. Чаще всего, это 16px. Именно он берется за "корневой" - "root" em - rem. От этого размера и рассчитывается единицы, указанные в rem.  

В инспекторе свойств для выделенного абзаца со стилевым правилом

видно, что размер шрифта как раз составляет 16px.

Примечание: чтобы посмотреть размер шрифта, сделайте правый клик на элементе и из контекстного меню внизу выберите пункт "Просмотреть код". Либо нажмите клавишу F12 и стрелочкой в квадратике выберите нужный элемент на странице.

Если вы хотите переопределить этот размер, задайте размер шрифта для html:

И еще добавим правило для body, чтобы проверить, как изменится размер шрифта для абзацев:

Тем не менее, размер шрифта для абзаца с правилом p {font-size: 1rem}, остался связанным с корневым элементом, и изменился до 20px:

Теперь он размером 20px. Т.е. соответствует размеру шрифта, заданному для html.

Примечание: Единица rem не поддерживается в браузере IE ниже 9-й версии.

Что такое 1em?

Это единица, связанная с размером шрифта родительского элемента. Соответствует 100% размера шрифта родителя.

Если этот размер изменить, задав его больше единицы,  то шрифт увеличится. Если его задать меньше единицы, то шрифт уменьшится. Т.е. цифра рядом с единицей em является множителем для размера шрифта.

В нашем примере зададим для <article> шрифт размером 1.2em.

Напомню, что до этого был задан размер шрифта для body в 18px.  А body является непосредственным родителем для article. Поэтому размер шрифта для статьи будет 18px*1.2 = 21.6px. Именно так его и рассчитает браузер:

Использование процентов

По большому счету, использование %  или em - это выбор верстальщика, т.к. по сути обе единицы отталкиваются от размеров шрифта родительского элемента.

Есть один подводный камень в использовании % для однотипных элементов, вложенных друг в друга. Рассмотрим его на примере:

В HTML один <div class="percent"> вложен в другой <div class="percent">. И вот, что будет с размером шрифта в них: родительский элемент будет иметь размер

А вложенный элемент будет иметь размер шрифта, увеличенный в 1,5 раза по отношению к родителю, т.е. предыдущему <div class="percent">:

Именно это и получаем в Инспекторе свойств:

Примечание 1: если в css-правилах для <div class="percent"> задать размер шрифта как  1.5em, то расчетная величина шрифта в px в браузере будет точно такой же.

Примечание 2: по сути, вы можете пользоваться процентами и em для задания размеров шрифтов как аналогами. А вот для других правил - ширины, высоты и т.п. разница между этими величинами может быть существенной, т.к. размеры в em берутся всегда от размера шрифта родителя (и дальше вверх по цепочке к корневому родителю, т.е. тегу <html>), то ширина, указанная в %, будет отталкиваться от ширины родительского элемента. И если последняя задана в px, то разница между % и em будет велика. Такие же нюансы характерны для правил margin и padding. А свойство line-height, указанное в % будет отталкиваться от текущего размера шрифта, а вовсе не от line-height родителя.

Единицы ex и ch

Помимо em от размеров шрифта отталкиваются еще 2 единицы измерения - это ex и ch, которые означают размер символа "x" и размер символа "0" (ноль, или zero). При том, что такие размеры существуют в шрифте всегда, используются эти единицы редко, так как «размер шрифта» em обычно всех устраивает.

В примере ниже заголовок имеет размер в 2.5ex.

CSS единицы для мобильных устройств

На данный момент изменение размеров шрифта (и не только шрифта :)) в зависимости от размера экрана - важная часть веб-дизайна, т.к. под различные разрешения экранов шрифт нужно "перестраивать" - т.е. увеличивать или уменьшать его для удобства пользователя.

Для этого были придуманы единицы, которые берут процент от viewport, т.е. окна просмотра, которое в телефонах будет от 320px до 480px, в планшетах 768-1024px, а на мониторах - от 1024px. Поэтому использовать здесь можно такие единицы, как

• vw – 1% ширины окна
• vh – 1% высоты окна
• vmin – наименьшее из (vw, vh), в IE9 обозначается vm
• vmax – наибольшее из (vw, vh)

Причем, данные единицы отлично зарекомендовали себя в тех случаях, когда, например, нужно установить высоту элемента, равную высоте экрана. Тогда достаточно написать следующее правило (для <div class="block"> в примере):

Т.е. вы можете получить горизонтальную полосу прокрутки, задав такое значение:

Для того чтобы этого не случилось, можно использовать функцию calc() в таком виде:

Резюме:

В большинстве случаев для определения размеров шрифта, а также ширин, высот и отступов элементов следует использовать такие единицы измерений, как px, em, rem и %. Для мобильных устройств  хорошо подойдут vh, vw или vmin, vmax.

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

Полезные ссылки:

• Ссылка на спецификацию W3C
• Статья The Relative Units of CSS