В этой статье мы рассмотрим относительные и абсолютные единицы измерения, а также единицы измерения области просмотра (viewport-единицы).

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

Размеры в CSS можно указывать не только в абсолютных единицах, таких как пиксели, поинты или сантиметры, но и в относительных – в процентах, em или rem. Использование относительных единиц измерения также помогает придерживаться стандартов доступности.

В большинстве браузеров по умолчанию установлен размер шрифта 16px. Это значение можно использовать при расчетах (например, 16px равны 1em, 1rem или 100%).

Давайте рассмотрим, какие же относительные единицы измерения у нас есть.

• % – измерение в процентах.
• em – размер шрифта относительно обычного, т. е., если шрифт имеет размер 2.5em, значит, он в 2,5 раза больше обычного шрифта.
• rem – размер шрифта относительно корневого элемента документа.
• ch – ширина символа «0». В моноширинных шрифтах, где все символы имеют одинаковую ширину, 1ch это ширина одного символа.
• ex – x-высота текущего шрифта, измеряется в высоте символа «х» в нижнем регистре.

Чем отличаются em и rem?

Разница между этими единицами в наследовании. Значение rem основывается на корневом элементе (html). Каждый дочерний элемент в качестве основы для вычислений использует размер шрифта элемента html.

А в единицах em вычисления основаны на размере шрифта родительского элемента.

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

Различные семейства шрифтов

Все представленные на картинке шрифты имеют один размер (18pt), но благодаря красной линии видно, что x-высота (ex) у этих шрифтов разная.

На этой картинке шрифты имеют все тот же одинаковый размер (18pt). Но они отличаются шириной, т. е., их размер в единицах ch будет разным. Символы моноширинных шрифтов имеют одинаковую ширину, а в serif или sans-serif символы отличаются по ширине (например, «i» будет уже, чем «o»).

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

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

• cm – сантиметры. 1 cm = 1 cm
• mm – миллиметры. 10 mm = 1 cm
• in – дюймы (inches). 1 in = 96px = 2.54 cm
• px – пиксели. 1 px = 1/96 от 1 in
• pt – поинты (points). 1 pt = 1/72 от 1 in
• pc – пайки (пики, англ. pica). 1pc = 12 pt

See the Pen CSS Absolute Units by Matthias (@fullstack-to) on CodePen.

Единицы измерения области просмотра (viewport-единицы)

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

• vw – 1% от ширины области просмотра (50% это половина ширины области просмотра).
• vh – 1% от высоты области просмотра (50% это половина высоты области просмотра).
• vmin – 1% от меньшего размера ширины или высоты области просмотра (т. е., если ширина меньше высоты, то vmin рассчитывается от ширины, при этом 1 vmin = 1 vw).
• vmax – 1% от большего размера ширины или высоты области просмотра (т. е., если высота больше ширины, то vmax рассчитывается от высоты, при этом 1 vmax = 1 vh).

See the Pen Viewport Units by Matthias (@fullstack-to) on CodePen.

vmin и vmax могут изменяться в зависимости от изменения размера окна браузера или смены ориентации мобильного телефона.

Какие единицы измерения выбирать при верстке / Хабр

• дюймы (in)
• сантиметры (cm)
• миллиметры (mm)
• пункты (pt)
• пики (pc)

• em (кегельная)
• x-height (ex)
• px (пикселы)

Единицы измерений в 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, чтобы проверить, как изменится размер шрифта для абзацев:

body { font-size: 18px; }

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

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

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

Что такое 1em?

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

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

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

body { font-size: 18px; } article { font-size: 1.2em; }

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

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

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

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

<div>Процентное задание размера шрифта <div>Размер шрифта внутреннего элемента в %</div> </div>

.percent { font-size: 150%; }

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

21.6px*150%/100% = 21.6px*1.5 = 32.4px.

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

32.4px*150%/100% = 32.4px*1.5 = 48.6px.

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

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

.percent { font-size: 1.5em; }

Примечание 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> в примере):

.block { height: 100vh; }

Резюме:

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

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

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

Просмотров: 374

% (проценты), px (пиксели), em, pt (пункты) / ProgLang

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

CSS поддерживает множество единиц измерений, включая абсолютные единицы измерения, такие как дюймы, сантиметры, пункты и т.д., а также относительные единицы измерения, такие как проценты, em и т.д. Эти значения необходимо использовать при указании различных измерений в ваших правилах стиля, например border = «5px solid blue».

Ниже перечислены все единицы измерения CSS вместе с соответствующими примерами:

Размер | CSS | WebReference

Для задания размеров различных элементов в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера.

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

Относительные единицы обычно используют для работы с текстом. В табл. 1 перечислены основные относительные единицы.

Единица em это изменяемое значение, которое зависит от размера шрифта текущего элемента (размер устанавливается через стилевое свойство font-size). В каждом браузере заложен размер текста, применяемый в том случае, когда этот размер явно не задан. Поэтому изначально 1em равен размеру шрифта, заданного в браузере по умолчанию или размеру шрифта родительского элемента. Процентная запись идентична em, в том смысле, что значения 1em и 100% равны.

Единица ex определяется как высота символа «x» в нижнем регистре. На ex распространяются те же правила, что и для em, а именно, он привязан к размеру шрифта, заданного в браузере по умолчанию, или к размеру шрифта родительского элемента.

Единица ch равна ширине символа «0» для текущего элемента и подобно em зависит от размера шрифта.

Разница между em и rem следующая. em зависит от размера шрифта родителя элемента и меняется вместе с ним, а rem привязан к корневому элементу, т. е. размеру шрифта заданного для элемента html.

Также есть группа относительных единиц привязанных к размеру области просмотра браузера. В табл. 2 показан их список с описанием.

Абсолютные единицы

Абсолютные единицы представляют собой физические размеры — дюймы, сантиметры, миллиметры, пункты, пики, а также пиксели. Для устройств с низким dpi (количество точек приходящихся на один дюйм, определяет плотность точек) привязка идёт к пикселю. В этом случае один дюйм равен 96 пикселям. Очевидно, что реальный дюйм не будет совпадать с дюймом на таком устройстве. На устройствах с высоким dpi реальный дюйм совпадает с дюймом на экране, поэтому размер пикселя вычисляется как 1/96 от дюйма. В табл. 3 перечислены основные абсолютные единицы.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Относительные единицы</title> <style> h2 { font-size: 30px; } p { font-size: 1.5em; } </style> </head> <body> <h2>Заголовок размером 30 пикселей</h2> <p>Размер текста 1.5 em</p> </body> </html><!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Абсолютные единицы</title> <style> h2 { font-size: 24pt; } p { margin-left: 30mm; } </style> </head> <body> <h2>Заголовок размером 24 пункта</h2> <p>Сдвиг текста вправо на 30 миллиметров</p> </body> </html>

Примечание

При установке размеров обязательно указывайте единицы измерения, например width: 30px. В противном случае браузер не сможет показать желаемый результат, поскольку не понимает, какой размер вам требуется. Единицы не добавляются только при нулевом значении (margin: 0).

Internet Explorer поддерживает единицу vm вместо vmin.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.03.2020

Редакторы: Влад Мержевич

Единицы Единицы CSS уроки для начинающих академия

.one-cm {размер шрифта: 1 см; }
.one-мм {размер шрифта: 1 мм; }
.one-in {размер шрифта: 1 дюйм; }
 

.one-point {размер шрифта: 1pt; }
.one-pica {размер шрифта: 1 шт; }
 

. один пиксель {размер шрифта: 1 пиксель; }
.one-процент {размер шрифта: 1%; }
 

.one-ex {размер шрифта: 1ex; }
.one-em {размер шрифта: 1em; }
 

.one-rem {размер шрифта: 1rem; }
 

 00000 
 

ширина: 50вв; / * 50% от ширины области просмотра * /
высота: 25vh; / * 25% от высоты области просмотра * /
 

ширина: 1вмин; / * 1vh или 1vw, в зависимости от того что меньше * /
высота: 1vmax; / * 1vh или 1vw, в зависимости от того что больше * /
 

п {размер шрифта: 0,394 дюйма; } / * десятичная дробь * /
p {маржа: -1px; } / * отрицательное значение * /
 

p {размер шрифта: 1ex; } / * корректно * /
п {размер шрифта: 0; } / * корректно * /
п {размер шрифта: 0ex; } / * корректно * /
п {размер шрифта: 1 пр .; } / * неправильно * /
п {размер шрифта: 1; } / * неправильно * /