Ответ 1

• В современных браузерах не должно быть разницы между мультимедийными запросами на основе em и pixel, если браузер правильно управляет масштабированием. У меня на самом деле были проблемы с мультимедийными запросами на основе em в одном проекте, потому что в одном из медиа-запросов изменился размер базового шрифта, а затем все другие медиа-запросы перепутались. Возможно, это была глупая ошибка, но вы поняли эту идею. Я бы пошел с пикселями. См. Обновление ниже. Пока зум не влияет на современные браузеры, размер базового шрифта по-прежнему сохраняется.

• Самая большая проблема, с которой я вижу, может столкнуться с технологией 62,5%, а rem - если вы работаете в браузерах, которые этого не понимают. Если вы беспокоитесь об этом, вы можете добавить резерв для менее способных браузеров и установить rem для современных.

  html { font-size: 62.5%; }
  body { font-size: 14px; font-size: 1.4rem; }
  h1   { font-size: 24px; font-size: 2.4rem; }
  

• Если какая-либо разница в том, как быстро работают браузеры px vs em, это не заметно. Браузеры вычисляют CSS действительно, очень быстро (намного быстрее, чем JS). Поэтому, вероятно, не стоит беспокоиться.

Измерение за плюсы, минусы и использование

точек

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

• Независимо от каскада CSS
• В основном не относительное измерение (просто зависит от того, как браузер измеряет пиксели шрифта)
• Масштабируемый во всех современных браузерах

ет

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

• Отвечает каскаду CSS
• Относительно размера шрифта контейнера
• Масштабируемый во всех современных браузерах

В этом примере изменение размера шрифта также пропорционально изменяет размер контейнера.

h1.title {
  font-size: 2em;
  width: 20em;
  background-color: #baff1e;
}

@media (min-width: 400px) {
  h1 {
    font-size: 2.5em
  }
}

бэр

Я на самом деле не использовал rem, но я вижу, почему многим нравится это. У вас есть сила относительной единицы, но вам не нужно разбираться с сумасшедшими вещами, которые могут произойти, когда вы бросаете каскад CSS.

Определение размеров, основанных на размере шрифта браузера, похоже на работу веб-стандартов, потому что тогда вы разрешаете браузеры, у которых оптимальный размер базового шрифта может не быть 16 пикселей. На практике, однако, это как-то работает по-другому. Из того, что я видел, браузеры используют 16px в качестве базового размера шрифта, потому что это то, что все ожидают, и установить фактический размер этого измерения CSS, чтобы выглядеть достойно в браузере.

• Независимо от каскада CSS
• Относительно базового размера шрифта
• Масштабируемый во всех современных браузерах

Заметка о методе 62,5%

Это было довольно долго, и сейчас я не знаю, почему не использовать его. Была статья "Как увеличить размер шрифта браузера по умолчанию?" имеет более 5000 просмотров. И аналогичный поток имеет более 15 000. В другом исследовании найден процент пользователей (0,3%), у которых размер шрифта по умолчанию меньше или больше, чем средний. Как часто пользователи на самом деле меняют это, кажется неуместным (см. предыдущий ответ SO). Если некоторые люди это делают, это, вероятно, стоит их поддержать.

Ems скорее всего более надежны в будущем. Они будут работать для любого устройства, оптимальный размер шрифта по умолчанию которого не равен 16px (а также тем, которые есть).

То, что убедило меня больше всего, было увидеть его в действии. Здесь приведена демо-версия codepen.Обратите внимание, что масштабирование браузера, вероятно, не имеет значения (я тестировал в Chrome). Но если вы действительно заходите в настройки своего браузера и меняете размер шрифта по умолчанию от "среднего" до чего-то другого, ширина будет удалена. На мой взгляд, это неприемлемо.

Ответ 2

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

Некоторые основные игроки

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

• Филаментная группа: em
• Люк Вроблевский: em
• Джеффри Зельдман: px
• Крис Койер: em
• Этан Маркотт (aka Отец отзывчивого веб-дизайна): px
• Джейсон Санта-Мария: px
• Марк Боултон: px
• Николас Галлахер: px

Интересно отметить, что последняя запись, Николас Галлахер, - это тот, кто добавил линию медиарекламы в HTML5 Boilerplate CSS. В этом коде он использует em, хотя на своем личном сайте медиа-запросы заданы в px. Я искал обсуждение этого коммита, но не смог найти.

Немногие из их сайтов

Опять же, немного разбросанного списка, но он содержит несколько сайтов, которые, на мой взгляд, стоит посмотреть. Большинство из них были полностью или частично созданы людьми из предыдущего списка.

• Бостонский глобус (Филаментная группа, 2011): px
• A List Apart: em
• dribbble (Dan Cederholm): px
• HTML5 Boilerplate: em
• HTML5 Mobile Boilerplate: px

Интересная заметка с Boilerplate HTML5, основной проект CSS использует em, в то время как в мобильной версии проекта используется px.

Мега-сайтов

На самом деле было действительно удивительно, что некоторые из самых популярных сайтов в Интернете имеют любые медиа-запросы вообще. Вот некоторые из них, которые используют медиа-запросы.

• Microsoft: px
• Twitter: px
• Wordpress.com: em
• Adobe.com: px

Заключение

Неопределённый.

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

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

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

Ответ 3

Существует одна основная причина, почему использование мультимедийных запросов на основе EM и соблюдать настройку размера шрифта для пользователей (базовых)
не нарушая ваш макет!

Вы никогда не должны никогда не определять размер шрифта в пикселях (а не ширины и высоты элементов)!!!
Позвольте пользователю решить, какой размер шрифта он любит смотреть на ваш сайт.

Таким образом, речь идет о доступности.

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

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

Все это можно избежать, используя относительные единицы, такие как EMs. И у них нет недостатков.

Также стоит упомянуть, что на самом деле базовая настройка размера шрифта, а также функция масштабирования в мобильных браузерах (на сенсорных устройствах, таких как планшеты и samrtphones) работают по-разному по сравнению с их настольными аналогами. Для версий мобильного браузера настройка размера шрифта не играет такой важной роли, как для настольных браузеров. Но опять-таки вы не ошибетесь, используя медиа-запросы EM. И imho это как можно более "будущее".

И вы также можете легко использовать "метод 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), это не так!