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

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

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

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

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

310
css css3 distance html units-of-measurement

11 ответов

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

Факты

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

    CSS определяет ссылка пикселей, который измеряет размер пикселя на дисплее 96 dpi. На дисплей, который имеет dpi, существенно отличающийся от 96dpi (например, Retina displays), агент пользователя масштабирует 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 элемент, слишком Новый, чтобы полагаться на. По состоянию на июль 2012 года около 75% всех браузеров в использовать поддержка rem.

Мнение

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

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

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

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

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

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

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

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

374

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

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

единица Обзор

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

rem блоки представляют собой rООТ 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 is хуже чем писать 0.75pt, так зачем кому-то использовать rem?

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

  • пользовательские настройки соблюдаются
  • вы можете изменить кажущееся px стоимостью rem С помощью

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

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

уважение пожеланий пользователя не выходит за рамки картины. Просто потому, что браузер установлен в 16px by по умолчанию это не означает, что пользователь не может изменить свои настройки на 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 on 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 on body используя rem:

:root {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}
<p>I'm the default font-size</p>

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

padding: 20px;

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

padding: 2rem;

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

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

и 1rem равной 1px.

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

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

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

Медиа-Запросы

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

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

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

rem в запросах мультимедиа используется начальное значение font-size и не учитывает никаких изменений, которые могли произойти с font-size на :root элемент. В другими словами, это очевидное значение всегда 16px.

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

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

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

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

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

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

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

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

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

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

105

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

в качестве рефлекторного ответа я бы рекомендовал использовать 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;
}
7

ответ josh3736 является хорошим, но, чтобы обеспечить контрапункт 3 лет спустя:

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

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

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

2

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

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

1

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

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

использовать vh

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

всегда разрешать прокрутку вниз, никогда в сторону.

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

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

-1

да. Вернее, нет.

-3

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

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

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

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

-4

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

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

-5