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

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

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

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

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

ОТВЕТЫ

Ответ 1

TL; DR: используйте px.

Факты

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

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

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

  • Размеры, указанные в em, относятся к родительскому элементу. Это приводит к 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% всех используемых браузеров.

Мнение

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

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

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

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

1 - within statistical error, naturally

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

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

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

Ответ 2

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

tl;dr: использовать rem

Обзор устройства

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

Единицы rem представляют размер r oot em. Это 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>

Ответ 3

В этой статье довольно хорошо описаны плюсы и минусы 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 */

Ответ 4

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

Но поддержка rem является пятнистой, IE8 нуждается в polyfill, и 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;
}

Ответ 5

josh3736 ответ хороший, но чтобы обеспечить контрапункт через 3 года:

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

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

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

Использовать VH

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

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

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

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

Ответ 9

Да. Или, вернее, нет.

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

UPDATE:

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

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

Ответ 10

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

Положите просто em - единственные, которые масштабируются в унисон с альт + и альт-ключами в браузере для масштабирования.

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

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

Ответ 11

EM - это ТОЛЬКО вещь, которая масштабируется для медиа-запросов, которые обрабатывают +/- масштабирование, что люди делают все время, а не просто слепые люди. Здесь еще очень хорошо написано профессиональная демонстрация того, почему это имеет значение.

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