Эмс по-прежнему актуальны?

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

Например, в Chrome вы можете сделать это, перейдя settings -> show advanced settings -> web content -> font size: very large. Я мог бы сделать это, если бы использовал большой монитор с высоким разрешением, который был далеко.

Я создал поршень, который демонстрирует разницу между ems и px в размерах.

#div1 {
  width: 320px
}

#div2 {

  width: 20em;
}

Если в моем браузере я установлю размер шрифта на средний, эти div-ы будут одинакового размера, базовый размер шрифта будет 16px, поэтому 20em = 320px.

Однако, когда я изменяю размер шрифта моего браузера на очень большой, мы видим, что размер div, измеренный в ems, увеличился.

Однако этот эффект будет отменен, если я, например, определю размер шрифта в теге body.

body {
  font-size: 16px;
}

Потому что теперь мой CSS переопределяет размер шрифта, установленный браузером.

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

Оглядевшись в Интернете - много сайтов , сделать набор размер шрифта в теле тега.

Например, Stack Overflow устанавливает размер шрифта в 13px в теге body. Установка размера шрифта в моем браузере никак не влияет на макет переполнения стека.

Результаты поиска Google не делают этого.

(оба эти снимки экрана сделаны с очень большим размером шрифта Chrome и 100% увеличением).

Поэтому, возможно, вы могли бы поспорить, что установка размера шрифта в теге body - плохая идея, поскольку она препятствует настройкам специальных возможностей пользователя. Но, учитывая, что пользователь может увеличить масштаб, чтобы увеличить размеры (что также пропорционально увеличит все пиксели) - это не кажется реальной проблемой.

Однако этот эффект будет отменен, если я, например, определю размер шрифта в теге body.

body {
  font-size: 16px;
}

Потому что теперь мой CSS переопределяет размер шрифта, установленный браузером.

Вы забываете о доступности .

См C14: Использование EM единиц для размеров шрифта от Web Content Accessibility Guidelines (WCAG 2.0).

Установите опцию размера шрифта вашего браузера на Очень большой . Теперь перейдите на веб-сайт, такой как W3C . Как выглядит текст?

Вот о чем этот вариант. Разработчики StackExchange и многих других сайтов решили, что их выбор важнее, чем выбор пользователей с нарушениями зрения. Является ли этот выбор правильным или неправильным, выходит за рамки этого вопроса, и ответ не является прямым.

Однако вы можете быть вынуждены (в том числе по закону для некоторых веб-сайтов) принимать различные решения и предоставлять пользователям возможность выбирать размер шрифта. Оттуда у вас есть выбор: либо вы указываете размер изображений и различные зоны страницы в пикселях, в этом случае параметр размера шрифта в браузере будет иметь забавные эффекты на макете, или вы используете emдля этих элементов как Что ж.

Также обратите внимание, что если вы не укажете размер шрифта в пикселях на уровне тела, то придерживайтесь emхотя бы размера шрифта везде. Например, Google неправильно указал размер шрифта, и их страница поиска выглядит странно, особенно если заголовки выглядят меньше обычного текста. Википедия, с другой стороны, отлично справилась с работой, emкогда указывал размер шрифта. Ниже приведены скриншоты обоих сайтов, представленные Chromium с параметром размера шрифта очень большим :

Поэтому, возможно, вы могли бы поспорить, что установка размера шрифта в теге body - плохая идея, поскольку она препятствует настройкам специальных возможностей пользователя. Но, учитывая, что пользователь может увеличить масштаб, чтобы увеличить размеры (что также пропорционально увеличит все пиксели) - это не кажется реальной проблемой.

Это реальная проблема по двум причинам.

Во-первых, большинство браузеров хранят коэффициент масштабирования сайта по сайту. Если у вас проблемы со зрением, вам придется снова и снова увеличивать масштаб каждого сайта, который вы посещаете. Это отстой. Учитывая текущее безразличие веб-дизайнеров и разработчиков к доступности, люди с нарушениями зрения должны делать это в любом случае, но это не значит, что так и должно быть.

Во-вторых, слишком много сайтов не будут вести себя хорошо визуально при увеличении. Адаптивные веб-сайты работают хорошо, но не реагирующие на них будут демонстрировать либо горизонтальную прокрутку, либо своего рода поведение «ваш экран слишком маленький».

Существует также принципиальная разница между масштабированием и масштабированием текста для разработчика. В то время как emозначает «настроить его в соответствии с настройками размера текста пользователя», масштабирование - это масштабирование всей страницы вверх или вниз, а не только текста.

Возьмите пример меню сайта (вверху страницы, ссылки расположены в строке). При масштабировании вы знаете, что высота меню будет изменяться пропорционально другим элементам. С опцией размера текста, это зависит от вас, чтобы определить поведение. Вы можете предположить, что человек со слабым зрением сможет видеть ваше 50pxменю -Высота во всех случаях: никто не пропустит черное меню на белом фоне. Или вы можете решить, что его высота должна оставаться пропорциональной, например, тексту 1.5em.

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

Это может быть неправильное понимание терминов с моей стороны, но, чтобы уточнить: emэто относительно размера шрифта "текущего элемента". remотносительно размера корневого шрифта.

Я понимаю, что ems был бы важен во времена старых браузеров, где увеличение страницы только увеличивало шрифты.

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

Во-первых, я обычно заинтересован в простом определении моих макетов в относительном выражении. Меня беспокоит то, что мои контейнеры выглядят хорошо по отношению друг к другу и тексту внутри них. И когда я меняю шрифт или настраиваю вещи по цепочке, я не хочу пересчитывать и обновлять все вручную, чтобы сохранить пропорции, за которые я стреляю. Пусть браузер сделает математику ...

Во-вторых, я просто хочу выразить размеры шрифта в простых терминах, которые я могу понять. Если я выражу свои базовые шрифты в pt's, а все остальное в rem' s или ems, мне будет легче. Мне не нужно знать разрешение вашего устройства, и вам не нужно увеличивать масштаб. Ваш браузер знает, сколько пикселей использовать; ни один из нас не должен думать об этом.