Каковы преимущества использования ems вместо% в CSS?

Я понимаю преимущества использования ems в пользу статических измерений, таких как пиксели и точки, но почему большинство пользователей CSS там (исключение SO) предпочитают использовать ems вместо значений%?

Ответы

Ответ 1

Для размеров шрифта:

  • em и% оба относятся к размеру шрифта родительского элемента (т.е. 2em и 200% всегда дают одинаковый результат)
  • ems имеют историю в типографии (хотя CSS em не совпадает с типографией em)
  • В реализациях браузера CSS меньше ошибок с%, чем с em

Для всего остального (например, ширина элемента):

  • em относится к размеру шрифта
  • % относится к родительскому элементу

... поэтому они делают совершенно разные вещи и должны рассматриваться в каждом конкретном случае.

Ответ 2

Ems основаны на известном и согласованном значении (размер шрифта), тогда как процент основан на размере контейнера. Создавать и понимать CSS гораздо сложнее, когда база ваших измерений и размеров меняется в зависимости от контекста (в каком элементе/контейнере вы находитесь).

Ответ 3

Я бы предположил, что одна из причин заключается в том, что многие веб-дизайнеры начали работать в качестве дизайнеров печати и поэтому используются для ems как единицы измерения. Это, безусловно, дело со мной.

Ответ 4

Дайте страницу с 3-столбцовым макетом с 25%/50%/25%, дайте ей шрифт, который позволяет использовать 6 строк статьи (размер шрифта 16%), с 5 статьями на страницу (высота 20%)

Теперь представьте себе это на встроенном устройстве с разрешением экрана 320x200px