Какая разница между единицами em и процентами?

Question

Я прочитал много статей на эту тему (и искал вопросы и ответы), и я нашел, но я все еще не понимаю, в чем разница между единицами em и процентами. Помогите?

PS Я видел этот пример кода:

p { font-size: 10px; }
p { line-height: 120%; }  /* 120% of 'font-size' */

Что это должно значить? С какой стати кто-то захочет установить высоту строки в процентах от размера шрифта?

Answer 1

ОК, поэтому я решил подвести итоги ответов.

• Процентное значение line-height относительно текущего размера шрифта.
• Единицы измерения всегда зависят от размера шрифта.
• Проценты зависят от контекста. Например, если они используются в размере шрифта, они будут относительно текущего размера шрифта; если это в высоте, они будут относительно высоты.
• Он немного меняется, когда родительский тег имеет размер шрифта, объявленный как "маленький", "средний" или "большой", потому что значения этих параметров зависят от настроек браузера. В этом контексте 1em =\= 100%, 1em делает настройку немного более "маленькой" или чуть более "большой", чем 100%, читайте об этом здесь.

Спасибо вам, ребята.:)

Answer 2

1em = 100%, 2em = 200%, 1,4 em = 140% и так далее. Тем не менее, это на самом деле зависит от контекста. Я думаю, что ems более "дружественны для мобильных устройств", но это зависит от разработчика.

В CSS вы используете процентные значения, потому что пользователи могут иметь разные разрешения экрана. Например, если вы не хотите, чтобы в вашем сгенерированном js содержалось пустое место.

1em означает "равно фактическому размеру шрифта", 2 - "в 2 раза больше размера шрифта", означает, что ems адаптируется к настройкам пользователя.

Таким образом, он немного меняется, когда родительский тег имеет размер шрифта, объявленный как "маленький", "средний" или "большой", потому что их значения зависят от настроек браузера. В этом контексте 1em =\= 100%, 1em, кажется, делает настройку немного более "маленькой" или чуть более "большой", чем 100%, читайте об этом здесь:

http://kyleschaeffer.com/user-experience/css-font-size-em-vs-px-vs-pt-vs/

Могут быть различия в производительности, но это будет зависеть от браузера.

Answer 3

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

p { line-height: 1.2; } /* = 1.2em = 1.2*font-size = 120% of font-size */

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