Мое понимание от чтения темы , как этот , что точка Эмса , чтобы определить все измерения в вашей веб - странице, с помощью базового размера шрифта , который может быть установлен в вашем браузере.
Например, в 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 { font-size: XYZ; }использование таблицы стилей пользователя с помощьюbody { font-size: ZYX !important; }Ответы:
Вы забываете о доступности .
См C14: Использование EM единиц для размеров шрифта от Web Content Accessibility Guidelines (WCAG 2.0).
Установите опцию размера шрифта вашего браузера на Очень большой . Теперь перейдите на веб-сайт, такой как W3C . Как выглядит текст?
Вот о чем этот вариант. Разработчики StackExchange и многих других сайтов решили, что их выбор важнее, чем выбор пользователей с нарушениями зрения. Является ли этот выбор правильным или неправильным, выходит за рамки этого вопроса, и ответ не является прямым.
Однако вы можете быть вынуждены (в том числе по закону для некоторых веб-сайтов) принимать различные решения и предоставлять пользователям возможность выбирать размер шрифта. Оттуда у вас есть выбор: либо вы указываете размер изображений и различные зоны страницы в пикселях, в этом случае параметр размера шрифта в браузере будет иметь забавные эффекты на макете, или вы используете
emдля этих элементов как Что ж.Также обратите внимание, что если вы не укажете размер шрифта в пикселях на уровне тела, то придерживайтесь
emхотя бы размера шрифта везде. Например, Google неправильно указал размер шрифта, и их страница поиска выглядит странно, особенно если заголовки выглядят меньше обычного текста. Википедия, с другой стороны, отлично справилась с работой,emкогда указывал размер шрифта. Ниже приведены скриншоты обоих сайтов, представленные Chromium с параметром размера шрифта очень большим :Это реальная проблема по двум причинам.
Во-первых, большинство браузеров хранят коэффициент масштабирования сайта по сайту. Если у вас проблемы со зрением, вам придется снова и снова увеличивать масштаб каждого сайта, который вы посещаете. Это отстой. Учитывая текущее безразличие веб-дизайнеров и разработчиков к доступности, люди с нарушениями зрения должны делать это в любом случае, но это не значит, что так и должно быть.
Во-вторых, слишком много сайтов не будут вести себя хорошо визуально при увеличении. Адаптивные веб-сайты работают хорошо, но не реагирующие на них будут демонстрировать либо горизонтальную прокрутку, либо своего рода поведение «ваш экран слишком маленький».
Существует также принципиальная разница между масштабированием и масштабированием текста для разработчика. В то время как
emозначает «настроить его в соответствии с настройками размера текста пользователя», масштабирование - это масштабирование всей страницы вверх или вниз, а не только текста.Возьмите пример меню сайта (вверху страницы, ссылки расположены в строке). При масштабировании вы знаете, что высота меню будет изменяться пропорционально другим элементам. С опцией размера текста, это зависит от вас, чтобы определить поведение. Вы можете предположить, что человек со слабым зрением сможет видеть ваше
50pxменю -Высота во всех случаях: никто не пропустит черное меню на белом фоне. Или вы можете решить, что его высота должна оставаться пропорциональной, например, тексту1.5em.источник
Это может быть неправильное понимание терминов с моей стороны, но, чтобы уточнить:
emэто относительно размера шрифта "текущего элемента".remотносительно размера корневого шрифта.Я не поэтому использую
em. На самом деле, ваш опыт масштабирования - последнее, о чем я думаю, когда я использую относительные единицы измерения. Мое беспокойство двоякое.Во-первых, я обычно заинтересован в простом определении моих макетов в относительном выражении. Меня беспокоит то, что мои контейнеры выглядят хорошо по отношению друг к другу и тексту внутри них. И когда я меняю шрифт или настраиваю вещи по цепочке, я не хочу пересчитывать и обновлять все вручную, чтобы сохранить пропорции, за которые я стреляю. Пусть браузер сделает математику ...
Во-вторых, я просто хочу выразить размеры шрифта в простых терминах, которые я могу понять. Если я выражу свои базовые шрифты в
pt's, а все остальное вrem' s илиems, мне будет легче. Мне не нужно знать разрешение вашего устройства, и вам не нужно увеличивать масштаб. Ваш браузер знает, сколько пикселей использовать; ни один из нас не должен думать об этом.источник