Переключение на их основе медиа-запросов



теперь, когда WebKit ошибка масштабирования страницы была основные, каковы основные причины использования запросов мультимедиа на основе em, а не запросов мультимедиа на основе пикселей?

награда

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

единственное преимущество, о котором я знаю, это то, что если пользователь изменит размер шрифта по умолчанию в своем браузере, контент будет сжать таким же образом, как и проблема, решаемая page-zoom fix. Есть ли данные люди на самом деле изменить размер по умолчанию, а не зум?

Примечание

чтобы сделать мой вопрос более сфокусированным, я удалил два периферийных элемента. Оригинальный пост добавит перспектива для отличного ответа @nwalton, который касался всех трех пунктов, о которых я спрашивал.

123   3  

3 ответов:

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

  2. самая большая проблема, которую я вижу, вы можете столкнуться с техникой 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; }
    
  3. если есть какая-либо разница в том, как быстро браузерах процесс px vs em, это не заметно. Браузеры вычисляют CSS очень, очень быстро (намного быстрее, чем JS). Так что, наверное, не стоит беспокоиться.


измерение плюсы, минусы, и использует

px

я использовал 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

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

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

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

примечание по методике 62,5%

это было вокруг довольно долго, и прямо сейчас я не знаю никаких причин, чтобы не использовать его. Было!--80-->2007 статья в списке отдельно где они провели некоторые тесты и обнаружили, что размеры шрифтов отображаются более надежно в браузерах, когда базовый шрифт был объявлен по адресу 100% и текст был установлен в размере em. Но я был бы удивлен, если какие-либо из ограничений браузера, перечисленных там, действительно актуальны. Мне все еще трудно чувствовать себя хорошо о настройке моего базового размера шрифта в 10px, но это, вероятно, просто личные предпочтения.


обновление

после выполнения некоторых тестов, я отзываю свою практику использования пикселей для медиа-запросов. Теперь я рекомендую em:

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

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

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

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

Некоторые Крупные Игроки

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

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

несколько их сайтов

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

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

Мега-Сайты

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

вывод

неубедительны.

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

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

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

есть одна главная причина, почему использовать EM на основе медиа-запросов, и это
уважайте пользователей (базовый) размер шрифта настройки
не нарушая ваш макет!

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

так что это вопрос доступности.

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

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

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

это тоже стоит упоминая, что на самом деле базовая настройка размера шрифта, а также функциональность масштабирования в мобильных браузерах (на сенсорных устройствах, таких как планшеты и samrtphones) работают по-разному по сравнению с их настольными аналогами. Для мобильных версий браузера настройка размера шрифта не играет такой важной роли, как для настольных браузеров. Но опять же вы не делаете ничего плохого с помощью 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) это не так!

    Ничего не найдено.

Добавить ответ:
Отменить.