Должен ли я использовать единицы измерения px или rem в CSS? [закрыто]

375

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

Мой вопрос: я должен использовать pxили remв моем CSS?

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

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

html css distance units-of-measurement TylerH
источник
4
Это спорный вопрос, аргументация и мнение, а не технические вопросы, в которых так хороша SO. Кстати, правильный ответ - «Нет». ☺
Юкка К. Корпела
2
Даже комментарий устарел. Тот факт, что ОП запрашивает правильное мнение, не означает, что мы будем только высказывать свое мнение. Спустя почти 8 лет этот вопрос показывает, что все еще интересуются тем, как субъект развивается. Текущие ответы являются обоснованными и достаточно техническими, а НЕ мнительными. Поэтому я предлагаю изменить слово «мнение» на «опыт», чтобы мы не попали в эту ловушку повторного открытия и закрытия вопроса снова и снова.
Тим Вермален
2
@TimVermaelen этот вопрос был закрыт только один раз в жизни. Внесенное изменение не было существенным, поскольку ответ все еще полностью зависит от контекста, который невозможно предоставить, если OP не отредактирует вопрос, чтобы задать конкретный сценарий. Не существует «лучшего» варианта для всех случаев, поэтому этот вопрос основывается на мнении.
TylerH

Ответы:

418

TL; DR: использовать px.

Факты

  • Во-первых, очень важно знать, что согласно спецификацииpx единица CSS не равна одному физическому пикселю дисплея. Это всегда было правдой - даже в спецификации CSS 1 в 1996 году .

    CSS определяет эталонный пиксель , который измеряет размер пикселя на дисплее с разрешением 96 точек на дюйм. На дисплее с dpi, существенно отличающимся от 96 dpi (как на дисплеях Retina), пользовательский агент изменяет размеры pxмодуля так, чтобы его размер соответствовал размеру эталонного пикселя. Другими словами, именно это изменение масштаба является именно тем, почему 1 пиксель CSS равен 2 физическим пикселям дисплея Retina.

    Тем не менее, вплоть до 2010 года (и несмотря на ситуацию с мобильным зумом), они pxпочти всегда равнялись одному физическому пикселю, поскольку все широко доступные дисплеи имели разрешение около 96 точек на дюйм.

  • Размеры, указанные в ems, относятся к родительскому элементу . Это приводит к em«проблеме составления», когда вложенные элементы постепенно увеличиваются или уменьшаются. Например:

    body { font-size:20px; } 
div { font-size:0.5em; }

    Дает нам:

    <body> - 20px
    <div> - 10px
        <div> - 5px
            <div> - 2.5px
                <div> - 1.25px

  • CSS3 rem, который всегда относится только к корневому htmlэлементу, теперь поддерживается в 96% всех используемых браузеров .

Мнение

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

Вначале единственный способ предоставить пользователям способ масштабирования размера текста - использование относительных единиц размера (например, ems). Это потому, что меню размера шрифта браузера просто изменило размер корневого шрифта. Таким образом, если вы указали размеры шрифта px, они не будут масштабироваться при изменении параметра размера шрифта в браузере.

Современные браузеры (и даже не очень современный IE7) все изменили метод масштабирования по умолчанию, чтобы просто увеличивать все, включая изображения и размеры блоков. По сути, они делают опорный пиксель больше или меньше.

Да, кто - то еще могут изменить свой браузер стили по умолчанию для настройки размера шрифта по умолчанию (эквивалент варианта размера шрифта старого стиля), но это очень эзотерический способ идти об этом , и я бы пари , никто - не делает. (В Chrome он скрыт под расширенными настройками, веб-контентом, размерами шрифта. В IE9 он еще более скрыт. Вы должны нажать Alt и перейти к View, Text Size.) Гораздо проще выбрать опцию Zoom в главное меню браузера (или используйте Ctrl+ +/ -/ колесо мыши).

1 - в пределах статистической погрешности, естественно

Если предположить, что большинство пользователей масштабируют страницы с помощью опции масштабирования, я нахожу относительные единицы большей частью неактуальными. Разработать вашу страницу намного проще, когда все указано в одном блоке (все изображения обрабатываются в пикселях), и вам не нужно беспокоиться о компоновке. ( «Мне сказали, что математики не будет» - нужно вычислить, к чему на самом деле работает 1.5em.)

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

Поэтому мой ответ - использовать пиксельные единицы. Я использую pxдля всего. Конечно, ваша ситуация может отличаться, и если вы должны поддерживать IE6 (пусть боги RFC помилуют вас), вам все emравно придется использовать s.

josh3736
источник
43
Вы должны использовать пиксели и rem. Таким образом, новые браузеры получают rem, а старые браузеры возвращаются к пикселям (как WordPress 2012). Это может быть автоматизировано с помощью Sass или Less, поэтому все, что вам нужно сделать, это ввести значение px, и оно автоматически выведет px и rem.
Cchiera
63
Мой большой спор с этим аргументом заключается в том, что при настройке размера шрифта и расстояния между точками останова вы можете установить новый размер шрифта для элемента html, и каждое измерение, которое вы установили в rem, будет автоматически корректироваться, тогда как для px вам нужно будет написать новые правила для каждого измерения, которое вы хотите настроить. Конечно, потребуется больше настроек даже при использовании rem, но при грамотном планировании вы получите огромное количество пропорционального масштабирования бесплатно. Привязка определенных измерений расстояния между блоками к типу, более легкому коду и меньшей сложности / большей ремонтопригодности - это явный выигрыш для rem для меня.
RobW
16
Предполагая, что ни один пользователь не меняет настройки размера шрифта, это достаточно жирный шрифт. Такое требование должно быть подкреплено данными. В противном случае это просто способ оттолкнуть некоторых пользователей, которые уже являются хрупкими (люди со слабым зрением). Если вы можете, используйте rem вместо px. ИМО, приложения должны иметь возможность независимо масштабировать свой интерфейс и размер шрифта. «Просто используйте px» - это то, что многие разработчики, борющиеся с проблемой ems, хотят услышать, но это не правильный ответ для Интернета.
Оливвв
18
Было бы здорово иметь продолжение этого. Рем теперь на 95% + поддержка.
Изучение статистики на примере
10
Неправильно, мне плевать на IE (никто не должен).
Вахид Амири
194

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

тл; др: использоватьrem

Обзор объекта

Исторически pxединицы обычно представляли собой один пиксель устройства. Для устройств с более высокой и более высокой плотностью пикселей это больше не распространяется на многие устройства, например на Retina Display от Apple.

remединицы представляют собой г OOT эм размера. Это font-sizeиз всех совпадений:root . В случае с HTML это <html>элемент; для SVG это <svg>элемент. По умолчанию font-sizeв каждом браузере * 16px.

На момент написания статьи remподдерживается примерно 98% пользователей . Если вы беспокоитесь о других 2%, я напомню вам, что медиа-запросы также поддерживаются примерно 98% пользователей .

По использованию px

Большинство примеров CSS в Интернете используют pxзначения, потому что они были стандартом де-факто. pt,in А также ряд других подразделений могли быть использованы в теории, но они не обрабатывать небольшие значения хорошо , как вы бы быстро нужно прибегать к фракциям, которые были больше к типу, и труднее рассуждать о.

Если вы хотите тонкую границу, pxвы можете использовать 1px, сpt чтобы использовать ее 0.75ptдля получения стабильных результатов, а это не очень удобно.

По использованию rem

remЗначение по умолчанию 16pxне очень сильный аргумент для его использования. Письмо 0.0625remэто хуже , чем письма0.75pt , так почему бы кто - нибудь использовать rem?

Есть две части rem преимущество перед другими подразделениями.

  • Пользовательские настройки соблюдаются
  • Вы можете изменить кажущееся pxзначение remна то, что вы хотите

Уважение предпочтений пользователя

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

Уважение пожеланий пользователя не исключено. То, что браузер настроен 16pxпо умолчанию, не означает, что ни один пользователь не может изменить свои предпочтения 24pxили 32pxисправить слабое зрение или плохую видимость (например, блики на экране). Если вы основываете свои единицы измерения rem, любой пользователь с более высоким размером шрифта увидит пропорционально больший сайт. Границы будут больше, отступы будут больше, поля будут больше, все будет плавно увеличиваться.

Если вы основываете свои медиазапросы rem, вы также можете убедиться, что сайт, который видят ваши пользователи, соответствует их экрану. Пользователь с font-sizeнабором для 32pxна 640pxширокий браузер, будет эффективно видеть ваш сайт , как показано пользователю в 16pxна 320pxшироком браузере. Там нет абсолютно никаких потерь для RWD в использованииrem .

Изменение видимого pxзначения

Поскольку remоснован на font-sizeна :rootузле, если вы хотите , чтобы изменить то , что 1remпредставляет собой, все , что вам нужно сделать , это изменить font-size:

:root {
  font-size: 100px;
}
body {
  font-size: 1rem;
}
<p>Don't ever actually do this, please</p>
Развернуть фрагмент

Что бы вы ни делали, не установить :rootэлемент font-sizeк pxзначению.

Если установить font-sizeна htmlк аpx значению, вы сдуваетесь предпочтениями пользователя без пути , чтобы получить их обратно.

Если вы хотите изменить кажущееся значение rem, используйте %единицы измерения.

Математика для этого достаточно проста.

Кажущийся размер шрифта :rootравен 16px, но допустим, мы хотим изменить его на 20px. Все, что нам нужно сделать, это умножить 16на некоторое значение, чтобы получить 20.

Настройте свое уравнение:

16 * X = 20

И решить для X:

X = 20 / 16
X = 1.25
X = 125%

:root {
  font-size: 125%;
}
<p>If you're using the default font-size, I'm 20px tall.</p>
Развернуть фрагмент

Делать все кратно 20не так уж и здорово, но общее предложение - сделать видимый размер remравным 10px. Магическое число для того, 10/16что есть 0.625, или 62.5%.

:root {
  font-size: 62.5%;
}
<p>If you're using the default font-size, I'm 10px tall.</p>
Развернуть фрагмент

Сейчас проблема заключается в том , что используемое по умолчанию font-sizeдля остальной части страницы набора слишком малы, но есть простое исправление для этого: Установить font-sizeна bodyиспользовании rem:

:root {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}
<p>I'm the default font-size</p>
Развернуть фрагмент

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

padding: 20px;

превращается в

padding: 2rem;

Выбранный вами размер шрифта зависит от вас, поэтому, если вы хотите, нет никаких причин, по которым вы не можете использовать:

:root {
  font-size: 6.25%;
}
body {
  font-size: 16rem;
}

и имеют 1remравные 1px.

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

Подожди, так в чем подвох?

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

Медиа-запросы (использование em)

Одна из первых проблем, с которой вы столкнетесь, remсвязана с медиа-запросами. Рассмотрим следующий код:

:root {
  font-size: 1000px;
}
@media (min-width: 1rem) {
  :root {
    font-size: 1px;
  }
}

Здесь значение remменяется в зависимости от того, применяется ли медиа-запрос, а медиа-запрос зависит от значения rem, так что же происходит?

remв запросах медиа использует начальное значение font-sizeи не должны (смотрите раздел Safari) принимать во внимание любые изменения , которые могут произойти с font-sizeиз :rootэлемента. Другими словами, это очевидная ценность всегда 16px .

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

|   px | rem |
+------+-----+
|  320 |  20 |
|  480 |  30 |
|  768 |  48 |
| 1024 |  64 |
| 1200 |  75 |
| 1600 | 100 |

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

Сафари

К сожалению, в Safari есть известная ошибка, из-за которой изменение :rootразмера шрифта действительно изменяет вычисленные remзначения для диапазонов медиазапроса. Это может вызвать очень странное поведение, если размер шрифта :rootэлемента изменяется в медиа-запросе. К счастью, решение простое: используйте emединицы для медиазапросов .

Переключение контекста

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

Моя единственная рекомендация здесь - придерживаться 62.5%конвертирования remв видимый размер 10px, потому что в моем опыте это встречалось чаще.

Общие CSS библиотеки

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

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

* Я не хочу отговаривать кого-либо от использования rem, но я не смог официально подтвердить, что каждый браузер использует 16pxпо умолчанию. Видите ли, есть много браузеров, и для одного браузера было бы не так уж и сложно отклониться, скажем, 15pxили 18px. Однако при тестировании я не видел ни одного примера, в котором браузер, использующий настройки по умолчанию, в системе, использующей настройки по умолчанию, имел какое-либо значение, кроме 16px. Если вы найдете такой пример, пожалуйста, поделитесь им со мной.

zzzzBov
источник
Я знаю, что это поздно, но мне нравится способ использования REM, но у меня больше всего проблем с использованием rem, когда я использую matrix()javascript, который используют значения для матричного перевода px(поправьте меня, если я ошибаюсь), и я так запутался с ним ,
Амперсанда
3
@Ampersanda, в JavaScript вы в основном будете использовать вычисленные значения пикселей. Моя рекомендация - по возможности переключать классы, чтобы CSS мог управлять тем, как все выглядит. В некоторых случаях вам не удастся избежать использования JS для вычисления значений пикселей, поэтому лучше всего рассчитывать значение пикселей из состояния DOM.
zzzzBov
Я вижу, так что я должен, getComputedStyle()но результат всегда на пикселе, поэтому я должен разделить результат на remзначение (например, 16). CMIIW
Амперсанда
@Ampersanda, только если вы фактически генерируете remзначение, если у вас уже есть правильное pxзначение, нет необходимости переключаться на remединицы для вещей, которые уже вычислены для данного контекста.
zzzzBov
1
1rem равняется 1px Это вызывает проблемы из-за минимального размера шрифта в Chrome: stackoverflow.com/questions/44378664/… stackoverflow.com/questions/24200797/…
Пол
44

В данной статье описывается довольно хорошо плюсы и минусы px, emи rem.

В конце концов автор приходит к выводу, что лучший метод, вероятно, состоит в том, чтобы использовать и то, pxи другое rem, pxсначала объявив для старых браузеров, и повторно объявив remдля новых браузеров:

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */
Узин
источник
1
Да, это именно то, что меня заинтересовало в первую очередь. Две вещи, которые я не понимаю: он советует это только как единицу измерения для шрифтов (не элементов), и, если я правильно его понимаю, единственная реальная причина использовать (r) em в том, чтобы пользователи IE могли изменять размер текста?
1
@ Самуэль, я верю в это. Если бы не изменение размера текста, я думаю, мы бы предпочли использовать px. Что касается юнитов для элементов, то придерживаться pxбудет лучше, так как вы обычно хотите точно определить размер элементов.
Узын
Но если вы сделаете это, любая настройка браузера, которая переопределяет базовый размер шрифта, испортит ваш макет, верно? Почему бы не Рем для всего?
1
Как отмечается здесь во многих комментариях , причина, по которой нам нужно было отказаться, px- включить изменение размера. Теперь, если мы используем rem, мы все равно должны предоставить pxзапасной вариант (в старых браузерах). По сути, это означает, что pxизменение размера поддержки лучше, чем rem. Новые браузеры поддерживают pxизменение размера и для старых браузеров любой способ, которым мы будем использовать запасной вариант px. Теперь, основываясь на свете этого вывода, мне очень интересно узнать, зачем использовать rem? Если я могу увидеть свет в конце туннеля.
fusionstrings
3
Нет гарантии, что такие значения, как 62,5% = 10px. Это верно только тогда, когда в браузере по умолчанию установлен размер шрифта 16 пикселей. Хотя это по умолчанию, это не гарантируется.
cimmanon
7

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

Но поддержка rem нечеткая, IE8 нуждается в полифилле, а Webkit демонстрирует ошибку. Кроме того, вычисление субпикселя может привести к тому, что такие вещи, как строки в один пиксель, иногда исчезают. Средство защиты заключается в кодировании в пикселях для таких очень маленьких элементов. Это вносит еще большую сложность.

Итак, в целом, спросите себя, стоит ли оно того - насколько важно и вероятно, что вы изменили «уровень масштабирования» всего документа в CSS?

В некоторых случаях это да, в некоторых случаях это будет нет.

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

Имейте в виду, что легко переключить (или, скорее, преобразовать) ваш CSS из px в rem (JavaScript - это другая история), потому что следующие два блока кода CSS будут давать тот же результат:

html {
}

body {
  font-size:14px;
}

.someElement {
  width: 12px;
}
html {
  font-size:1px;
}

body {
  font-size:14rem;
}

.someElement {
  width: 12rem;
}
Рольф
источник
7

Да, REM и PX являются относительными, но другие ответы предлагают использовать REM вместо PX, я также хотел бы подтвердить это на примере доступности.
Когда пользователь устанавливает другой размер шрифта в браузере, REM автоматически масштабирует элементы веб-страницы, такие как шрифты, изображения и т. Д., Чего не происходит с PX.

В приведенном ниже gif текст левой части задается с использованием REM-единицы размера шрифта, а шрифт правой стороны задается единицей PX.

введите описание изображения здесь

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

По умолчанию размер шрифта веб-страницы составляет 16px, что равно 1 rem (только для html-страницы по умолчанию html{font-size:100%}, т. Е.), Поэтому 1,25rem равно 20px.

PS: кто еще использует REM? CSS Frameworks! как Bootstrap 4, Bulma CSS и т. д., так что лучше ужиться с этим.

JerryGoyal
источник
3

Ответ Джоша 3736 хороший, но для контрапункта через 3 года:

Я рекомендую использовать remединицы измерения для шрифтов, хотя бы потому, что вам , разработчику, легче менять размеры. Это правда, что пользователи очень редко меняют размер шрифта по умолчанию в своих браузерах, и что современное масштабирование браузера будет увеличивать pxединицы измерения. Но что если ваш начальник придет к вам и скажет: «Не увеличивайте изображения или значки, а делайте все шрифты больше». Гораздо проще просто изменить размер корневого шрифта и позволить масштабировать все остальные шрифты относительно этого, а затем изменить pxразмеры в десятках или сотнях правил CSS.

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

Caniuse.com, возможно, сказал, что только 75% браузеров, когда josh3736 опубликовал свой ответ в 2012 году, но по состоянию на 27 марта заявили, что поддерживают 93,78% . Только IE8 не поддерживает его среди браузеров, которые они отслеживают.

Джошуа Кармоди
источник
1
Only IE8 doesn't support it among the browsers they track.А? На связанной странице указано, что «IE9 и IE10 не поддерживают rem-единицы, когда они используются в свойстве сокращенного шрифта или при использовании псевдоэлементов. IE9, 10 и 11 не поддерживают rem-единицы при использовании в свойстве line-height при использовании в псевдоэлементах: before и: after. Границы с размером rem исчезают при уменьшении страницы в Chrome. Не работает в браузере Samsung Note II Android 4.3 и Samsung Galaxy Tab 2 в Android 4.2. Chrome 31-34 и Android на базе Chrome (например, 4.4) имеют ошибку размера шрифта, возникающую, когда корневой элемент имеет размер в процентах ».
е-суши
Кроме того, в связи с вашим as of March 27 they claim 93.78% support.На момент написания этого комментария, caniuse показывает только 91,79% полной поддержки браузера. Глядя на ваш процент, я почти уверен, что вы также включили поддержку глючного браузера (в настоящее время 2,8%, что может быть истолковано как оптимистичное покрытие в 94,6%, но факт в том, что эти 2,8% идут с ошибками, неполным или даже полным). отказ в поддержке… как отмечалось в моем предыдущем комментарии: каждая ошибка является результатом разных версий браузера и комбинаций операционной системы.) Вы можете исправить свой ответ соответствующим образом…
e-sushi
1

Я обнаружил, что лучший способ запрограммировать размеры шрифтов на сайте - это определить базовый размер шрифта для, bodyа затем использовать em (или rem) для каждого другого, который font-sizeя объявляю после этого. Полагаю, это личное предпочтение, но оно хорошо мне помогло, а также позволило легко внедрить более отзывчивый дизайн .

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

cereallarceny
источник
Хорошо. Но адаптивный дизайн так же легко сделать с правильными единицами px (просто напишите ваши медиа-запросы на основе px вместо em)?
Однако вы можете уменьшить размер шрифта, так как ширина области просмотра вашего сайта уменьшается, тогда вы можете изменить bodyразмер шрифта, и все изменится вместе с ним.
cereallarceny
Я не очень беспокоюсь о поддержке браузера. Я просто включу резервный размер px для всех размеров, чтобы у старых браузеров было что-то для интерпретации.
Тогда идите по прогрессивному пути, используя рем. Пока вы предоставляете запасной вариант, я не вижу вреда. Для меня это просто кажется дополнительной работой, но, возможно, не в вашей ситуации.
cereallarceny
0

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

Если у вас было это:

html {
    font-size: 12pt;
}

тогда 1remвсегда будет 12pt. remи emявляются такими же независимыми от устройства, как и элементы, на которые они опираются; некоторые браузеры не ведут себя в соответствии со спецификацией и трактуют pxбуквально. Даже в старые времена Интернета 1 точка всегда считалась 1/72 дюйма, то есть 72 дюйма на дюйм.

Если у вас старый, несовместимый браузер, и у вас есть:

html {
    font-size: 16px;
}

затем 1remбудет зависеть от устройства. Для элементов, которые наследуются от htmlпо умолчанию, 1emтакже будет зависеть от устройства. 12ptбудет надежным гарантированным независимым от устройства эквивалентом:, 16px / 96px * 72pt = 12ptгде 96px = 72pt = 1in.

Это может быть довольно сложно сделать математику, если вы хотите придерживаться определенных единиц. Например .75em of html = .75rem = 9pt, и .66em of .75em of html = .5rem = 6pt. Хорошее правило:

  • Используйте ptдля абсолютных размеров. Если вам действительно нужно, чтобы это было динамически относительно корневого элемента, вы слишком много просите о CSS; вам нужен язык, который компилируется в CSS, например, Sass / SCSS.
  • использование em для относительных размеров. Очень удобно иметь возможность сказать: «Я хочу, чтобы поле слева было около максимальной ширины буквы» или «Сделайте текст этого элемента чуть больше, чем его окружение». <h1>является хорошим элементом для использования размера шрифта в ems, поскольку он может появляться в разных местах, но всегда должен быть больше, чем текст рядом. Таким образом, вам не нужно иметь отдельный размер шрифта для каждого применяемого класса h1: размер шрифта будет адаптироваться автоматически.
  • Используйте pxдля очень маленьких размеров. В очень маленьких размерах,pt в некоторых браузерах с разрешением 96 точек на дюйм может получиться размытым, ptи pxони не совсем совпадают. Если вы просто хотите создать тонкую однопиксельную рамку, скажем так. Если у вас дисплей с высоким разрешением, это не будет очевидно для вас во время тестирования, поэтому обязательно протестируйте его на обычном дисплее с 96 DPI.
  • Не используйте субпиксели, чтобы придумать что-то на экранах с высоким разрешением. Некоторые браузеры могут поддерживать это - особенно на дисплеях с высоким DPI - но это нет-нет. Большинство пользователей предпочитают большие и понятные, хотя Интернет научил нас, разработчиков, иначе. Если вы хотите добавить расширенные детали для своих пользователей с помощью современных экранов, вы можете использовать векторную графику (читай: SVG), что вам в любом случае следует делать.
Zenexer
источник
1
pt предназначен для печатных СМИ и никогда не должен использоваться для экранов
SF
@sf CSS определяет pt и px так, что они всегда имеют одинаковое соотношение, несмотря на то, что это не является технически точным использованием этих терминов (72pt = 96px = 1in). На самом деле, в CSS пиксель - это на самом деле не один пиксель устройства. На моем экране 1 пиксель составляет 2 пикселя устройства. Преимущество использования pt перед px заключается в том, что вы можете легко указывать размеры элементов относительно размеров, связанных с текстом.
Zenexer
-2

Половина (но только половина) язвительного ответа (другая половина - горькое презрение к реальности бюрократии):

Используйте VH

Все всегда соответствует размеру окна браузера.

Всегда позволяйте прокручивать вниз, а не в сторону.

Установите ширину тела равной 50vh, и ничто не всплывает и не вырывается из родительского элемента div. И стиль только с использованием таблиц, так что все жестко удерживается на месте, как и ожидалось. Включите функцию javascript, чтобы отменить любое действие ctrl +/-, которое может выполнять пользователь.

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

liljoshu
источник
-3

Да. Вернее нет.

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

ОБНОВИТЬ:

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

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

DA.
источник
Итак, ваш ответ в том, что это не имеет значения? Или есть определенные ситуации, в которых вы бы ценили одно над другим? И если да, то в каких ситуациях это будет иметь место?
@ Самуил, да, могут быть времена, когда вы захотите использовать один или другой. Я обновил свой ответ с дополнительной информацией.
DA.
Извините, я немного запутался с оригинальной формулировкой. Кажется, у вас есть REM в названии и EM в теле. Похоже, вы специально спрашиваете о REM. Ответ по-прежнему в значительной степени тот же, но REM имеет некоторые дополнительные преимущества, но в основном используется так же, как EM - он позволяет использовать «базовый» размер шрифта.
DA.
Почему « ЭМ [...] хорошо , если вы можете начать с нуля и хотите использовать базовый размер шрифта и сделать все относительно этого. »? В чем преимущество (r) em перед px? Так ли это, что пользователи IE могут изменять размер текста, или есть другие преимущества перед px (что кажется более простым)?
EM и REM имеют одинаковое преимущество: вы можете установить HTML или BODY на определенный размер шрифта (скажем, 10px), а затем все остальное установить как EM или REM. Таким образом, если вы хотите пропорционально увеличить размер шрифта, просто измените один начальный стиль на 10 пикселей на 11 пикселей. Это было гораздо полезнее 5 лет назад, когда мы все создавали свои собственные виджеты изменения размера шрифта на основе JS. В наши дни браузеры лучше справляются с масштабированием (особенно мобильным), что, на мой взгляд, приносит гораздо меньше пользы. Если вы находите PX более простым, то это является для вас преимуществом и, безусловно, веской причиной для использования PX.
DA.
-4

Это путь вперед, не только для шрифтов, но вы также можете использовать их с полями, толщиной линии и прочим, почему?

Проще говоря, единственные, которые масштабируются в унисон с клавишами alt + и alt- в браузере для масштабирования.

Другие измерения масштабируются, но не так чисто, как em.

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

Shawty
источник
3
Но большинство браузеров в настоящее время одинаково масштабируют все элементы страницы (если только вы не отрегулируете базовый размер шрифта), так что преимущество использования (r) em не верно для современных браузеров, верно?
Это так и не так, хотя вы правы в том, что вы говорите, речь идет скорее о коэффициенте масштабирования, а не о дельте масштабирования. Дельта всегда будет одинаковой независимо от используемого измерения, но масштабный коэффициент (при условии, что математические вычисления выполнены правильно) будет корректироваться по мере необходимости, например, для широкоэкранного монитора по сравнению со стандартным монитором или прямоугольных пикселей по сравнению с квадратными пикселями. Поскольку на самом деле значения rems основаны на истинном измерении принтеров, масштабирование всегда будет более подходящим, другие (например,%) в лучшем случае часто имеют дельта-смещение
Shawty
(продолжение) с умножением, применяемым в обоих направлениях, и, как результат, в некоторых случаях может дать сильно непропорциональный коэффициент просмотра.
Shawty
2
«Проще говоря, единственные, которые масштабируются в унисон с клавишами alt + и alt- в браузере для масштабирования». = это неверно.
DA.
Итак, я мог бы сформулировать это лучше, см. Мой предыдущий комментарий для исправления.
Shawty
-5

EM - ЕДИНСТВЕННАЯ вещь, которая масштабируется для медиа-запросов, которые обрабатывают +/- масштабирование, что делают люди постоянно, а не только слепые люди. Вот еще один очень хорошо написано профессиональная демонстрация того, почему это важно.

Кстати, именно поэтому Zurb Foundation использует ems , в то время как нижняя Bootstrap 3 по-прежнему использует пиксели.

robmuh
источник
2
Это не совсем правильно. В старые времена пиксели не могли быть увеличены в старых версиях IE. +/- теперь делает полный масштаб страницы во всех текущих браузерах, так что это не проблема. Кроме того, этот вопрос касается Rems, а не px - не em против px.
Рич Брэдшоу
1
Вы, ребята, заставляете меня смеяться. Вы даже пытались масштабировать свой сайт, используя +/- с использованием пикселей? Писать о пикселях быть увеличено до предела. Голосуй за меня, сколько хочешь. Голоса не меняют реальность.
Робмух
1
Возможно, мы рассматриваем немного разные вещи - есть ли шанс, что вы можете создать простую демонстрацию, чтобы продемонстрировать разницу?
Рич Брэдшоу
Я не думаю, что вопрос в том, какие единицы использовать в медиа-запросах ...
binki