Зачем использовать em?

Question

[Фёдор]

Итан Маркотт в своей книге "Отзывчивый дизайн" для задания размеров шрифта использует em вместо пикселей. С какой целью это делается? И нужно ли в таком случае задавать высоту элементов и отступы так же в em? Какая от этого польза?

Answer 1

[Сергей delphinpro]

Не возводите всё в абсолют.
Нужно действовать по обстоятельствам. Если конкретный размер зависит от размера шрифта, то их следует задавать в em. Например, интерлиньяж напрямую зависит от размера шрифта. Или расстояние между абзацами, заголовками и т.п.
Непосредственно размер шрифта лучше указывать в rem (и одновременно в пикселях, если верстаете под IE8). Есть случаи, когда удобно задать размер шрифта именно в em, это когда одни элемент вложен в другой, и у этого вложенного элемента шрифт должен быть больше/меньше относительно родителя.

В общем нет правила "пишите всё в em" или "пишите всё в пикселях". Ориентируйтесь по обстоятельствам, включайте логику.

Answer 2

[Anton Filippov]

можно в одном месте менять фонт-сайз и это будет менять шрифты и отступы везде, где используется em, удобно для респонсива

Comments

[Антон Нагаец]

думается мне вы путаете css препроцессоры и размер шрифта. При изменении в препроцессоре переменной да, будет меняться везде где она прописано
LESS
@font-size:1.2em; ->@font-size:2em;
.class1{
font-size:@font-size;
}
.class2{
font-size:@font-size;
}

Но в чистом СSS оно не измениться везде.
.class1{
font-size:1em; -> font-size:1.2em;
}
.class2{
font-size:2em;
}
Как в class2 размер был 2em так он и остался.

[Anton Filippov]

Антон Нагаец: при чем тут препроцессоры лол?
задаешь в боди фонт-сайз 16пх, в остальных местах указываешь в ем, в медиаквери пишешь что при таком то разрешении фонт-сайз, например 18 - и вуаля - емы переписывать не нужно, все само увеличится

Answer 3

[Антон Нагаец]

Кризис идентичности пикселя
Почему EM?