Пиксели:#px
Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.
Относительно шрифта:#em
1em – текущий размер шрифта. Можно брать любые пропорции от текущего шрифта: 2em, 0.5em и т.п.
Размеры в em – относительные, они определяются по текущему контексту.
24 пикселей – и в Африке 24 пикселей, поэтому размер шрифта в div одинаков.
А вот аналогичный пример с em вместо px:
Страусы
Живут также в Африке
Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1.5 раза больше, чем первая.
Выходит, размеры, заданные в 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
Задаёт размер относительно величины шрифта родительского элемента — em (от ephemeral unit — «относительная единица измерения») или корневого элемента <html> или <svg> — rem (от root ephemeral unit — «главная относительная единица»).
Может быть, пора уже остановиться, может этого достаточно?
Вернёмся к теме#font. Бывают задачи, когда мы хотим сделать на странице большие кнопки «Шрифт больше» и «Шрифт меньше». При нажатии на них будет срабатывать JavaScript, который будет увеличивать или уменьшать шрифт.
Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl++, но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?
Какую единицу использовать для задания шрифтов? Наверно не px, ведь значения в px абсолютны, если менять, то во всех стилевых правилах. Вполне возможна ситуация, когда мы в одном правиле размер поменяли, а другое забыли.
Следующие кандидаты – em и %.
Разницы между ними здесь нет, так как при задании font-size в процентах, эти проценты берутся от font-size родителя, то есть ведут себя так же, как и em.
Относительно экрана:#vw,#vh,#vmin,#vmax
Во всех современных браузерах, исключая IE8-, поддерживаются новые единицы из черновика стандарта CSS Values and Units 3:
vw – 1% ширины окна
vh – 1% высоты окна
vmin – наименьшее из (vw, vh), в IE9 обозначается vm
vmax – наибольшее из (vw, vh)
Эти значения были созданы, в первую очередь, для поддержки мобильных устройств.
Их основное преимущество – в том, что любые размеры, которые в них заданы, автоматически масштабируются при изменении размеров окна.