Относительные единицы обычно используют для работы с текстом, либо когда надо вычислить процентное соотношение между элементами.
em
em вычисляется относительно размера шрифта родительского элемента. Если по простому, то 1em – текущий размер шрифта.
Можно брать любые пропорции от текущего шрифта: 2em, 0.5em и т.п.
Один em равен значению свойства font-size заданного шрифта. Всё это очень важно понимать, при таких ситуациях, как, например, вложенность нескольких элементов в друг друга.
.wrapEm {
font-size: 1.5em;
}
<div class="wrapEm">
Text one
<div class="wrapEm">
Text two
<div class="wrapEm">Text three</div>
</div>
</div>
Следует уточнить, что em-ы работают не только со шрифтами, но и с любыми другими размерами и свойствами, например, с теми же отступами, границами, ширинами и т.д. И высчитывают эти величины, так же, отталкиваясь от размера шрифта.
Проценты %
Когда мы говорим «процент», то возникает вопрос – «Процент от чего?»
Значение высчитывается относительно значения свойства родительского тега. Это очень важная особенность процентов, про которую, увы, часто забывают.
.wrapProcent {
font-size: 90%;
}
<div class="wrapProcent">
Text one
<div class="wrapProcent">
Text two
<div class="wrapProcent">Text three</div>
</div>
</div>
По сути, ничего сложного. Следует помнить, что у процентов есть ряд особенностей. Например, в отличии от em, размеры отступов, ширины и т.д, у процентов высчитывается относительно ширины родительского элемента, а не относительно его шрифта. В связи с чем не получится указать размер шрифта и отступов в одних и тех же единицах.
font-size: .5em;
margin: .5em;
vs.
font-size: 50%;
margin: 50%;
Т.е, если, например, в последнем примере нам хочется, чтобы отступ был равен межстрочному интервалу, то из процентной величины шрифта напрямую его не взять. Всё равно придётся прибегать к (r)em-ам или абсолютным единицам.
Ещё один из важных моментах в жизни процента, это пример, когда задав вертикальные отступы у элемента в %, многие начинающие верстальщики (да, и не только), полагают, что высчитываться они будут относительно высоты родительского элемента. Но, на самом деле это не так. На этом примере видно, что при изменении высоты, отступы у параграфа остаются неизменными, что нельзя сказать про результат во время смены ширины контейнера. В этом случае вертикальные отступы начинают пропорционально изменяться, относительно ширины своего родительского элемента. Т.е, выходит, что вертикальные отступы реагируют на width предка, а не на его height. Это может показаться странным, но на самом деле всё вполне логично. Составляя эту часть спецификации, W3C исходили из того, что, если, например, верхнее или нижние отступы задать как процент от высоты родителя, это может привести к бесконечному циклу. Ведь в таком случае высота родителя постоянно бы увеличивалась, чтобы вместить вертикальные отступы, которые затем снова должны были бы увеличиться относительно новой высоты и т.д. Этот момент очень важен и о нём нужно помнить.
Но, самое, пожалуй, известное и полезное использование процентов, это ситуация, когда мы можем назначить корневому элементу body разумный размер шрифта, а затем использовать проценты для шрифта всех остальных элементов на сайте. Это позволяет изменять размер шрифта всего сайта в одном месте, т.е. у body. Пожалуй, это очень удобно.
margin-left
При установке свойства margin-left в %, процент берётся от ширины родительского блока, а вовсе не от его margin-left.
line-height
При установке свойства line-height в %, процент берётся от текущего размера шрифта, а вовсе не от line-height родителя.
width/height
Для width/height обычно процент от ширины/высоты родителя, но при position:fixed, процент берётся от ширины/высоты окна (а не родителя и не документа).
rem
rem — новыя единица измерения, введённая спецификацией. Она означает примерно "Корневой em" (root em).
Если em — это единица, которая пляшет относительно шрифта родительского элемента, то rem — это единица измерения, которая пляшет относительно корневого элемента, т.е, как вы уже догадались — html. Это означает, что мы можем определить единый размер шрифта в <html>, и отталкиваться уже от него, причём при любой вложенности.
.wrapRem {
font-size: 1.5rem;
}
<div class="wrapRem">
Text one
<div class="wrapRem">
Text two
<div class="wrapRem">Text three</div>
</div>
</div>
getComputedStyle(document.documentElement).fontSize
vw, vh, vmin и vmax
Во всех современных браузерах, поддерживаются новые единицы из черновика стандарта CSS Values and Units 3:
vw – 1% ширины окнаvh – 1% высоты окнаvmin – наименьшее из (vw, vh)vmax – наибольшее из (vw, vh)
Эти значения были созданы, в первую очередь, для поддержки мобильных устройств.
Их основное преимущество – в том, что любые размеры, которые в них заданы, автоматически масштабируются при изменении размеров окна.
Этот текст написан с размером `5vh`.
Вы сможете легко увидеть, как работает vh, если поменяете размер окна браузера. Текст выше будет расти/уменьшаться.