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

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

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

Единица измерения	Название	Эквивалент
cm	сантиметры	1cm = 96px/2.54
mm	миллиметры	1mm = 1/10 от 1cm
in	дюймы	1in = 2.54cm = 96px
pc	пика	1pc = 1/6 от 1in (дюйма) или 12 пунктов
pt	пункты	1pt = 1/72th от 1in (дюйма)
px	пиксели	1px = 1/96 от 1in (дюйма)

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

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

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

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

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

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

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

Так как же мы можем не ломать наши доступности?

Установите корневой HTML размер шрифта в процентах. Это процент браузера по умолчанию размера шрифта пользователя. Типичный способ установить HTML размер шрифта до 62,5%. Это потому, что 62,5% 16px (по умолчанию размер шрифта) является 10px. Что бы еще сделать 1.6rem = 16px. Это теперь означает, что если размер шрифта в браузере пользователя по умолчанию меняется на, например, 20 пикселей, 1.6rem будет теперь равна 20px. Так что если пользователь хочет больше шрифтов, пусть. Счастливый дизайнер. Счастливый Разработчик. Все цифры по-прежнему легко работают.

Идеальный сценарий должен был бы оставить HTML размер шрифта как 100%, но это делает математику немного сложнее. Например, 16px теперь 1rem, 20px является 1.25rem, 24px является 1.5rem и т.д.

Проценты %

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

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

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

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

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

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

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

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

При установке свойства в , процент берётся от ширины родительского блока, а вовсе не от его .

При установке свойства в , процент берётся от текущего размера шрифта, а вовсе не от родителя. Детали по и размеру шрифта вы также можете найти в статье Свойства font-size и line-height.

Для обычно процент от ширины/высоты родителя, но при , процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства height в %.

Новые псевдоклассыСкопировать ссылку

Единицы измерения и значения — это всё прекрасно, но особенно меня радуют селекторы и псевдоклассы. Когда у меня получается выдумать замысловатый селектор, даже если он в итоге будет запрятан там, где только немногие избранные смогут его найти, я всегда чувствую себя мастером своего дела. Перефразируя отца Стива Джобса: ты должен сделать так, чтобы забор со стороны твоего дома выглядел так же хорошо, как со стороны улицы, даже если больше никто не будет знать, что это так — ведь ты будешь.

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

Абсолютная длина

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

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

Длина	Описание
cm	сантиметры Код
mm	милиметры Код
in	дюймы (1in = 96px = 2.54cm) Код
px *	пикселы (1px = 1/96th of 1in) Код
pt	точки (1pt = 1/72 of 1in) Код
pc	цицеро (1pc = 12 pt) Код

* Пиксели (px) относительно устройства просмотра. Для устройств с низким разрешением 1px — это один пиксель (точка) дисплея. Для принтеров и высокого разрешения
экраны 1px подразумевает несколько пикселей устройства.

Using Only REMs to Make a Header Element

Say you have a header element () that looks like this:

I’m a header!

The header’s styles should be similar to the following if you sized everything in :

So far so good.

Next, let’s create a slightly bigger header element since it’s common to have differently-sized elements on the same website. While doing so, let’s try to inherit as many styles as possible.

The markup of the bigger header element might be something like this:

The CSS would be:

Unfortunately, the code doesn’t turn out well. You can see that there’s too little breathing space between the edge and text of .

Not enough breathing space between edge and text on this large header

If you insist on using only s, the only way to fix this problem is to redeclare the on the large header:

More padding the large header now!

Notice the pattern here? ’s is twice as large as ’s. Consequently, on is twice as large as on .

What would happen if we have more headers of different sizes, or if the headers have to change in size? You can already see how coding the entire site in can cause duplication and super complex code.

We can simplify the code such that there’s no need to redeclare on if we don’t mind using both and :

As you can see, can be incredibly helpful when you have a property that needs to scale with it’s font size. This is where the first rule was born.

Next, let’s take a look at what happens if you use an only approach for the same header.

CSS Свойства

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingcaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Изменения, которые нужно учесть

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

• заменить на
• заменить на

Но, похоже, пока не стоит этого ждать, по крайней мере в отношении . Это свойство обновили буквально только что и в его названии по-прежнему присутствует . Пример: .

Но кто знает, может этот пост попадётся на глаза правильным людям из W3C 🙂

Резюмируя

Вот и всё. Я надеюсь, что вам понравилась эта статья и вы узнали что-то новое. Я буду признателен, если вы поаплодируете или поделитесь этим постом 🙂

Примеры использования viewport единиц

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

Размер шрифта

Единицы вьюпорта идеальны для адаптивной типографики. Для примера, мы можем использовать следующий код для заголовка статьи:

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

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

А там у нас выходит уже ниже .

Чтобы решить эту проблему, нам надо дать заголовку минимальный размер шрифта, который не может быть меньше положенной нормы. И тут CSS  спешит на помощь!

У функции  будет основное значение и оно добавит к нему . Учитывая это, размер шрифта точно не будет слишком маленьким.

Ещё стоит рассмотреть то, как себя будет вести размер шрифта на больших экранах, к примеру на 27” аймаках. Что будет? Ну вы уже наверное предположили. Размер шрифта бахнет аж в , что само по себе уже кошмар. Чтобы предохраниться от этой ситуации мы можем использовать медиа запросы на определённых брейкпоинтах и менять размеры шрифтов.

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

Полноэкранные секции

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

Добавив , мы можем точно убедиться в том, высота секции будет в 100% высоту вьюпорта. Также, тут я добавил немного флексбокса, чтобы отцентровать контент вертикально и горизонтально.

Прилипающий футер

На больших экранах вы могли уже обратить внимание на то, что футер не прилипает к концу страницы. Ну и это нормально

Это даже не рассматривается как плохая практика. Однако, тут у нас есть пространство для улучшений. Давайте рассмотрим следующий кейс, в котором и происходит эта ошибка.

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

Первое решение: calc и единицы вьюпорта

Если высота хедера и футера фиксированны, то их можно совместить с помощью функции :

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

Второе решение: Flexbox и вьюпорт единицы (рекомендуемое)

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

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

Адаптивные элементы

Занимаясь подготовкой материала я наткнулся на эту статью и она мне реально понравилась. Так что я возьму пример использования оттуда и объясню его своим способом.

Предположим, что у нас есть портфолио для того, чтобы показать свои адаптивные работы и у нас имеется три типа устройства (мобильные, планшеты и ноутбук). В каждом устройстве есть по изображению. Суть в том, чтобы сделать этот контент 100% отзывчивым на CSS.

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

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

Всё это приведет к флюидному дизайну.

Выходим за пределы контейнера

Я обратил внимание на случай, который больше всего подходит для редакторских шаблонов. А именно когда дочерний элемент забирает 100% ширины вьюпорта, хотя его родитель ограничен в ней

Давайте рассмотрим пример ниже:

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

Давайте разберем всё по полочкам и поймём как это работает.

Добавляем 

Самый важный шаг, который даст изображению ширину равную 100% вьюпорта.

Добавляем 

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

Добавляем 

И наконец, мы отодвинем изображение в правую сторону со значением 50% от ширины его родителя.

em Unit

em is borrowed from the typography world, and it’s a unit that allows setting the font-size of an element relative to the font-size of its parent.

Let’s take this simple example:

With that example, the child would have a font-size of 27px (1.5 * 18px = 27px).

If the parent element doesn’t specify a value for font-size, a value will be looked for higher up in the DOM tree. If no font-size is specified all the way up to the root element (), then the browser default of 16px is used.

Pretty simple and straight-forward right? em units can be used for much more than just setting font-size however, and they can be used pretty much everywhere units are expected (padding, margin, width, height, max-width,…you get the picture!) When em units are used on other properties than font-size, the value is relative to the element’s own font-size.

Let’s add to our example:

• The padding top and bottom on will be 54px. That’s 2 times the font-size of our current element’s font size (2 * 27px)
• The padding left and right on will be of 27px. That’s 1 time the font-size of our element.

Remember: when em units are used on font-size, the size is relative to the font-size of the parent. When used on other properties, it’s relative to the font-size of the element itself.

Compounding Effect: Trouble in Paradise

So far everything is well and good with using the em unit, but a problem can come about from the fact that the unit can compound from one level to the other.

Let’s keep a similar basic example:

But let’s use it in our markup like this:

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

So, as you can see, the effect of em units can be compounding when multiple em-font-sized elements are within one another. This can become a problem and can lead to unintended consequences in your designs.

This problem is the reason why the rem unit was created.

When to Use Pixels

You’re looking at a monitor which is comprised of lots of tiny dots that are used to make up an image. These are pixels. Or rather, they’re what people usually mean when they talk about pixels. Pixels (px) in CSS do not mean the same thing as pixels on your monitor —in fact, they’re a non-linear angular measurement. It doesn’t really matter what that means and it seems people like to argue about what exactly it does mean, but you do need to understand that pixels are an absolute unit of measurement. Absolute means that they are the same size regardless of the size of anything else (that will make more sense in second). In practice, they aren’t the same length everywhere because different devices treat them differently, but on each device a pixel is always the same. 16px on your laptop monitor is not the same as 16px on your iPad. Pixels are absolute but not consistent.

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

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

.one-ex { font-size: 1ex; }
.one-em { font-size: 1em; }

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

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

.one-rem { font-size: 1rem; }

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

<div style="width: 5ch;">00000</div>

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

User Changed Their Browser’s Font Setting.

Many developers like to believe that users don’t change their browser’s since it’s hidden deeeep inside the settings.

Well, it’ll be awesome if all users exhibit this behavior because we don’t have to do this experiment! 🙂

Unfortunately, there’s no data to proof that users don’t change their browser’s s, so it’s still our duty as developers to bake the flexibility into our websites.

In this experiment, I enlarged the default of the four browsers I tested with in the following way (incase you wanted to follow along):

• Chrome: Go to , , .
• Firefox: Go to , , .
• Internet Explorer: Click on , then

The only browser I couldn’t figure out where to set the font-size was Safari. So I used a proxy instead. I change the settings such that the smallest font-size is larger than 16px. To do so, go to , , .

This was the only test that all browsers behaved in the same way:

Results from all browsers for scenario 3

As you can see, the pixel queries triggered earlier than or queries.

There aren’t any bugs here. This is the correct implementation since px are absolute units. The breakpoint should remain at 400px no matter what the user set’s their default to.

and , on the other hand, is based on the of the browser. Hence, their media queries should get updated when the user changes their default setting.

So… I’m sorry to break your bubble, pixel fans, but it’s a no-go for pixel based queries.

(Here’s a more detailed explanation for people who found this last experiment confusing.)

Try to imagine you’ve coded up a website that has a breakpoint at 600px. This 600px breakpoint is perfect for a font-size of 16px (the default).

Let’s call the viewport smaller than 600px the small viewport, while that larger than 600px the medium viewport.

Let’s further assume that you only changed the layout at 600px. You used a one-column layout below 600px, and a two-column layout above 600px.

Now, change your browser font-size setting to 20px and look at your website at 650px.

If you used or based media queries, your user would see a one-column layout at 650px. This behavior would be consistent with the first two scenarios.

If you used based media queries, your user would see a two-column layout at 650px. This behavior would be inconsistent with the above scenarios. (And the design would not fit the screen).

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index