В чем разница между единицами ЭМ и процентами?

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

С. П. Я видел такой пример кода: 

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

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

3 2
css percentage

3 ответа:

Итак, я решил подвести итоги ответов.

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

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

6

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

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

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

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/

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

2