Что относится к единицам измерения в css

Единицы измерения CSS

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

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

К абсолютным единицам измерения относятся сантиметры (cm), миллиметры (mm) и дюймы (in). Не смотря на то, что они предназначены для одинакового отображения элементов на веб-странице, браузер не всегда может точно вычислить физический размер дисплея или монитора, поэтому на разных устройствах элементы могут иметь разные размеры.

.one-cm < font-size: 1cm; >.one-mm < font-size: 1mm; >.one-in

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

Типографские единицы

К типографским единицам измерения относятся точки (pt) и пики (pc). Точка (1pt) имеет фиксированный размер 1/72 дюйма, в то время как пика (1pc) равна 1/6 дюйма (1pc = 12pt). Эти две единицы измерения наиболее полезны в стилях, написанных для печатных версий документов, а не для использования на экранах.

.one-point < font-size: 1pt; >.one-pica

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

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

.one-pixel < font-size: 1px; >.one-percent

Пиксель — точка равная одному физическому пикселю на экране. Однако браузеры не всегда точно расчитывают размер области просмотра в пикселях.

Рассмотрим последние модели ноутбуков, планшетов и смартфонов, оснащенные экранами с высоким разрешением. На таких устройствах браузер не соотносит единицу px с количеством физических пикселей на экране. Вместо этого он нормализует единицу px, так чтобы приблизить характеристики просмотра к традиционному настольному монитору с плотностью пикселей в районе от 96 до 120 пикселей/дюйм. В результате квадрат со стороной в 10px может отрисовыватся браузером на смартфоне так, что на каждой стороне окажется от 15 до 20 физических пикселей. Это означает, что px также оказывается относительной единицей измерения.

Шрифтозависимые относительные единицы

Двумя дополнительными относительными единицами измерения являются em и ex. Em — высота текущего шрифта, ex — высота символа «х» в нижнем регистре указанного шрифта.

.one-ex < font-size: 1ex; >.one-em

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

В CSS3 введены две дополнительные единицы измерения: rem и ch. Rem — размер шрифта корневого элемента (), она может использоваться вместо em для предотвращения влияния размеров шрифта родителя или предков на размер шрифта текущего элемента.

.one-rem

Единица ch равна ширине символа ноль (0) шрифта элемента. Ее использование может быть полезным для определения ширины поля, содержащего текст, потому что 1ch примерно соответствует одному символу.

00000
 

Единица ch поддерживается только в Chrome 27+, Firefox 19+ и IE9. Rem поддерживается в Chrome 4+, Firefox 3.6+, IE9+, Safari 4.1+ и Opera 11.6+.

Единицы области просмотра

К единицам измерения области просмотра относятся vw (ширина) и vh (высота), позволяющие масштабировать элементы относительно области просмотра, то есть видимой части веб-страницы.

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

Двумя дополнительными единицами являются vmin и vmax, которые задают минимальное или максимальное значение размера области просмотра.

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

Единицы измерения относительные области просмотра поддерживаются в Chrome 26+, Firefox 19+, IE11+, Safari 6.1+ и Opera 15+.

Значения единиц измерения

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

p < font-size: 0.394in; >/* десятичная дробь */ p < margin: -1px; >/* отрицательное значение */

Обратите внимание, что объявление не будет работать, если перед единицей измерения стоит пробел, или если единица измерения не указана (за исключением нулевого значения). Если в качестве значения используется ноль, то указание единицы измерения можно опустить.

p < font-size: 1ex; >/* корректно */ p < font-size: 0; >/* корректно */ p < font-size: 0ex; >/* корректно */ p < font-size: 1 ex; >/* неправильно */ p < font-size: 1; >/* неправильно */

Всякий раз, когда CSS объявление содержит ошибку, оно игнорируется браузером, при этом остальные объявление продолжают работать.

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru

Единицы измерения: px, em, rem и другие

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

Пиксели: px

Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.

Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.

Пиксели могут быть дробными, например размер можно задать в 16.5px . Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px , его нужно разделить на три части – волей-неволей появляются 33.333. px . При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.

Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование.

Достоинства

• Главное достоинство пикселя – чёткость и понятность

Недостатки

• Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами

Давно на свалке: mm , cm , pt , pc

Существуют также «производные» от пикселя единицы измерения: mm , cm , pt и pc , но они давно отправились на свалку истории.

Вот, если интересно, их значения:

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

Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.

Почему в сантиметре cm содержится ровно 38 пикселей?

В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.

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

Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.

Относительно шрифта: em

1em – текущий размер шрифта.

Можно брать любые пропорции от текущего шрифта: 2em , 0.5em и т.п.

Размеры в em – относительные, они определяются по текущему контексту.

Например, давайте сравним px с em на таком примере:

 
Страусы 
Живут также в Африке
 

24 пикселей – и в Африке 24 пикселей, поэтому размер шрифта в одинаков.

А вот аналогичный пример с em вместо px :

 
Страусы 
Живут также в Африке
 

Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1.5 раза больше, чем первая.

Выходит, размеры, заданные в em , будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.

Что такое размер шрифта?

Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.

Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.

Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом «хвосты» букв, таких как р , g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.

Единицы ex и ch

В спецификации указаны также единицы ex и ch, которые означают размер символа «x» и размер символа «0» .

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

Эти единицы используются чрезвычайно редко, так как «размер шрифта» em обычно вполне подходит.

Проценты %

Проценты % , как и em – относительные единицы.

Когда мы говорим «процент», то возникает вопрос – «Процент от чего?»

Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.

Это очень важная особенность процентов, про которую, увы, часто забывают.

Отличный источник информации по этой теме – стандарт, Visual formatting model details.

Вот пример с % , он выглядит в точности так же, как с em :

 
Страусы 
Живут также в Африке
 

В примере выше процент берётся от размера шрифта родителя.

А вот примеры-исключения, в которых % берётся не так:

margin-left При установке свойства margin-left в % , процент берётся от ширины родительского блока, а вовсе не от его margin-left . line-height При установке свойства line-height в % , процент берётся от текущего размера шрифта, а вовсе не от line-height родителя. Детали по line-height и размеру шрифта вы также можете найти в статье Свойства font-size и line-height. width/height Для width/height обычно процент от ширины/высоты родителя, но при position:fixed , процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда % требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства height в %.

Единица rem: смесь px и em

Итак, мы рассмотрели:

• px – абсолютные, чёткие, понятные, не зависящие ни от чего.
• em – относительно размера шрифта.
• % – относительно такого же свойства родителя (а может и не родителя, а может и не такого же – см. примеры выше).

Может быть, пора уже остановиться, может этого достаточно?

Э-э, нет! Не все вещи делаются удобно.

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

Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl + + , но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?

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

Следующие кандидаты – em и % .

Разницы между ними здесь нет, так как при задании font-size в процентах, эти проценты берутся от font-size родителя, то есть ведут себя так же, как и em .

Вроде бы, использовать можно, однако есть проблема.

Протестируем на таком списке:

Единицы измерения CSS: rem vs em

В CSS есть множество удобных и полезных единиц измерения. Относительные единицы в современном мире адаптивного дизайна (такие как em или rem) дают нам адаптируемость и гибкость прямо «из коробки», позволяя определять размеры элемента на основе размера шрифта, определенного выше в разметке.

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

Резюме: единица em в свойстве font-size относится к размеру шрифта родительского элемента. В остальных свойствах em относится к размеру шрифта текущего элемента. Единица rem всегда относится к размеру шрифта корневого элемента html.

Единица измерения em

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

Возьмем этот простой пример:

.parent < font-size: 18px; >.child

В этом примере дочерний элемент будет иметь размер шрифта 27 пикселей (1,5 * 18 пикселей = 27 пикселей).

Если родительский элемент не указывает значение для размера шрифта, значение будет искаться выше в дереве DOM. Если размер шрифта не указан вплоть до корневого элемента (), то используется стандартное значение браузера – 16px.

Довольно просто и ясно, верно? Однако единицы em можно использовать не только для установки размера шрифта – они подходят практически везде (для определения отступов, полей, ширины, высоты, максимальной ширины и т.д.) Если единица em используется для других свойств, а не для font-size, значение относится к собственному размеру шрифта элемента.

Добавим к нашему приведенному выше примеру:

.parent < font-size: 18px; >.child

• Отступы сверху и снизу на .child будут составлять 54 пикселя. Это в 2 раза больше размера шрифта нашего текущего элемента (2 * 27 пикселей).
• Отступы слева и справа .child будут иметь размер 27 пикселей. Это в 1 раз больше размера шрифта элемента.

Помните: когда единица em используется в свойстве font-size, размер определяется относительно размера шрифта родителя. При использовании в других свойствах значение зависит от размера шрифта самого элемента.

Недостаток em

С единицей em бывают проблемы – эта единица может компоноваться с одного уровня на другой.

Давайте взглянем на такой базовый пример:

.parent < font-size: 15px; >.child

Теперь мы попробуем использовать его в нашей разметке следующим образом:

 
I'm 15px 
I'm 30px, as expected 
I'm 60px, trouble starts! 
I'm 120px, now we're really in trouble!
 
 
 

Вот что получится:

I’m 15px
I’m 30px, as expected
I’m 60px, trouble starts!
I’m 120px, now we’re really in trouble!

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

Именно эта проблема и стала причиной для создания модуля rem.

Единица измерения rem

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

Это означает, что при использовании rem значения родительских элементов игнорируются, во внимание принимается только значение root.

Давайте рассмотрим пример кода с rem:

.html < font-size: 16px; >.parent < font-size: 15px; >.child-rem

 
I'm 15px 
I'm 32px, as expected 
I'm 32px, yep! 
I'm 32px, like clockwork!
 
 
 

I’m 15px
I’m 32px, as expected
I’m 32px, yep!
I’m 32px, like clockwork!

Как вы можете видеть, единица rem позволяет избежать «комбинированного эффекта» единицы em. С rem все последовательно основано на font-size или на корневом элементе, так что никаких сюрпризов ждать не приходится.

То же самое относится и к другим значениям помимо font-size (margin, padding и т.д.). Использование единиц rem в них по-прежнему будет относиться к размеру шрифта корневого элемента.

em vs rem: что лучше?

На самом деле нет лучшего варианта, все зависит от ваших личных предпочтений. Некоторым людям нравится проектировать все в единицах rem для согласованности и предсказуемости, в то время как другим нравится использовать единицы em в тех местах, где влияние ближайших родительских элементов имеет смысл. Какую единицу измерения использовать – решать вам.

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

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

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

Этот логотип Google в левом углу имеет абсолютную высоту и ширину 30 пикселей и 92 пикселя соответственно, что означает, что если мы изменим размер экрана, другие элементы, такие как панель поиска, изменят свою высоту и ширину, но логотип останется в точных размерах: 92 x 30.

Для логотипов сайтов обычно используют абсолютные единицы. Большинство из этих единиц используются для печати, единственная единица, широко используемая для веб-сайтов, — это пиксель (px). Если мы посмотрим на пример, то поймем, что именно означает абсолютный . Мы возьмем div и установим абсолютные единицы измерения в качестве его размеров, тогда мы увидим, как изменение окна просмотра не влияет на размеры div.

Вывод, как мы видим в браузере:

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

Виды абсолютных единицы в CSS

1. Пиксели (px) — широко используются на веб-сайтах для создания элементов фиксированного размера (например, в логотипе), т. е. мы не хотим, чтобы они меняли размер при изменении размера экрана. 1px = 1/96 дюйма.
2. Пункты (pt) — в основном используется в принтерах для печати вывода на бумаге и не так широко используется для вывода на экран. 1pt = 1/72 дюйма.
3. Пикас (pc) — также как и пункты используется для печати. 1 шт = 1/6 дюйма
4. Сантиметры (cm) — это наш старый добрый сантиметр, который мы все знаем �� 2,54 см = 1 дюйм.
5. Милиметры (mm) — 10 мм = 1 см.
6. Дюймы (in)

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

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

Относительные единицы подходят для масштабирования элементов по отношению к другим элементам на той же странице, т. е. для обеспечения адаптивности элемента. Давайте возьмем пример, где мы бы установим ширину div равной ровно 50% ширины body, и она должна автоматически регулироваться относительно body.

Вывод в браузере:

Из приведенных выше двух изображений видно, что в любой момент времени ширина элемента div составляет ровно 50% ширины родителя (в нашем случае— тела body). Это то, что делает веб-страницы «отзывчивыми».

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

Проценты

Проценты позволяют измерять размер элемента относительно размеров родителя. Например, если мы установим ширину HTML-элемента равной K %, тогда его ширина будет рассчитываться следующим образом:

Ширина элемента = (K/100) * Ширина родительского элемента

Размер в процентах широко используется для создания адаптивных сайтов. Это позволяет нам динамически изменять размеры HTML-элементов относительно размера окна просмотра.

EM

Значение EM наследуются относительно своего родителя (также как и проценты). Таким образом, если мы установим размер родительского шрифта равным 2em, а затем снова установим размер дочернего шрифта равным 2em, он будет добавлен к 4em (т.е. 400% от значения по умолчанию)!

Вариант использования: в основном используется, чтобы задать адаптивный размер шрифта. Посмотрим пример ниже:

   
Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, fuga.
 
 
 
  

body < font-size: 16px; >div < font-size: 32px; padding: 10px; background-color: aliceblue; max-width: 500px; >.big-text

Стандартный размер шрифта был задан в body и равен 16px. В элементе div мы увеличили размер шрифта в полтора раза относительно его значение в родителе body. В элементе big-text еще раз увеличили размер, относительно div. Таким образом, для big-text получаем шрифта:

16px * 1.5 * 1.5 = 36px

EM может вызвать проблемы в случае, если код CSS становится сложнее. Для того, чтобы исправить недостатки em был создан REM.

REM

Эта единица противодействует суммирующему эффекту таких единиц, как % и em. rem скорее означает Root em . Это означает, что браузер будет игнорировать все корректировки, сделанные для родительских элементов, и будет масштабировать элемент HTML, к которому применяется свойство, на основе корневого значения/значения по умолчанию для этого конкретного элемента.

   
Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, fuga.
 
 
 
  

div < font-size: 32px; >.big-text

Вывод в браузере:

В этом коде CSS размер шрифта div установлен 32px (то есть в два раза больше базового шрифта, заданного в body). Если бы мы не задавали размер текста для элемента big-text, то он бы просто наследовал значение 32px от своего родителя div. Однако для big-text мы задали значение 1.5rem. То есть сделали размер текста в полтора больше относительно корневого родителя body, но никак не div!

Таким образом, для big-text мы получили размер шрифта:

VH

VH — означает высоту области просмотра. Если мы хотим, чтобы элемент имел точно такую ​​же высоту, как и область просмотра/окно просмотра, необходимо задать 100vh для обозначения высоты элемента.

Пример использования: в основном используется для страниц, занимающих всю высоту области просмотра.

VW

VW означает ширину области просмотра. 100vw означает 100% ширины области просмотра/окна просмотра.

Вариант использования: в основном используется, когда ширина элемента должна быть обрамлена шириной области просмотра.

Пример использования VH и VW:

Для блока box мы задали ширину 50vw (половина от ширины окна браузера) и высоту 100vh (на всю высоту окна браузера).

Vmin

Единица Vmin позволяет выбирать наименьшее значение из ширины VW и высоты VH браузера. Например: если ширина браузера меньше его высоты, то 1 Vmin = 1 VW.

Используется для адаптивной верстки. Если мы хотим поместить элемент в область просмотра, мы должны отдать предпочтение минимуму из двух vh и vw.

Vmax

Единица Vmax напротив выбирает большее значение из ширины и высоты браузера. Например: если ширина браузера больше его высоты, то 1 Vmax = 1 VW.

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

Резюме

1. Значения абсолютных единиц не зависят ни от каких других факторов и остаются неизменными независимо от любых изменений. В то время как в относительных единицах значения зависят от некоторого фактора, и изменение этого фактора приведет к изменению значения.
2. Относительные единицы измерения предпочтительнее абсолютных единиц для создания адаптивных сайтов, потому что, когда HTML-элементы установлены в относительные единицы, они масштабируются по отношению к размеру окна просмотра, поэтому размер элементов будет автоматически изменяться, чтобы соответствовать размеру экрана, т.е. становится адаптивным.
3. Безразмерные размеры: если числовое значение равно нулю, единицу измерения можно пропустить.