Есть одна основная причина, по которой следует использовать медиа-запросы на основе EM, а именно:
учитывать пользовательские (базовые) настройки размера шрифта
без нарушения макета!
Вы действительно никогда не должны определять ни размеры шрифта в пикселях (ни ширину/высоту ваших элементов)!!!
Позвольте пользователю решить, какой размер шрифта ему нравится смотреть на вашем сайте.
Так что это вопрос доступности.
Если вы используете значения в пикселях, вы должны принять определенный (базовый) размер шрифта, который «обычно» составляет 16 пикселей. Но не всегда, и в этом суть. Поэтому, если пользователь выбрал меньший или больший (базовый) размер шрифта, ваш макет развалится.
Или в настольных системах, если пользователь использует функцию масштабирования браузера, он получит горизонтальную полосу прокрутки (что в большинстве случаев нежелательно).
Всего этого можно избежать, используя относительные единицы, такие как EMs. И у них нет недостатков.
Также стоит упомянуть, что на самом деле настройка базового размера шрифта, а также функция масштабирования в мобильных браузерах (на сенсорных устройствах, таких как планшеты и смартфоны) работают иначе, чем их аналоги на настольных компьютерах. Для мобильных версий браузеров настройка размера шрифта не играет такой важной роли, как для настольных браузеров. Но опять же, вы не делаете ничего плохого, используя медиа-запросы на основе EM. И имхо, это максимально «проверено на будущее».
И вы также можете легко использовать "метод 62,5%".
Напоминаем, что новый размер шрифта "root em" зависит от размера шрифта корневого элемента (страницы), и это элемент html, а не body элемент.
Используйте «технику 62,5%», не нарушая доступности:
html {
font-size: 62.5%; /* with the standard base font size of 16px this will be equal to 10px */
}
body {
font-size: 160%; /* 160% of 10px ~ 16px, understood by all browsers */
font-size: 1.6rem; /* 1.6 * 10px ~ 16px, understood by all major browsers and IE9+ */
}
Таким образом, вы можете использовать rem так же, как если бы это было px (деленное на 10),
но без какого-либо вреда для настроек пользователя!
Независимо от того, какой базовый размер шрифта выбрал пользователь, соотношение шрифтов всегда останется неизменным.
А также ваш макет! ;-)
И последнее замечание:
Всегда используйте min|max-width медиазапросы и никогда device-width! Причина в том, что вы размещаете и устанавливаете точки останова в зависимости от вашего контента, а не от разрешения каких-либо устройств!
Таким образом, используя относительные единицы (например, EMs) для вашего макета и размеров шрифта, ваш дизайн действительно «отзывчив». При использовании абсолютных единиц (например, PX) это не так!
15.03.2014
font-size, которое равноmediumи соответствует базовому размеру шрифта в большинстве браузеров. Это кажется неожиданным, но из-за того, как вычисляетсяfont-size, на самом деле нет другого способа реализовать это - кроме полного изменения определения единицы em, и в этом случае они могли бы также определить совершенно новую единицу, поскольку это уже будет не EM. 14.05.2014emотображает НЕПРАВИЛЬНУЮ ширину в пикселях, а версияpxпоказывает правильную ширину горизонтальных полос... Я я в замешательстве 14.04.2015