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

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

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

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

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

11 310
html css css3 edit-distance units-of-measurement

11 ответов:

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

Факты

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

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

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

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

Мнение

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

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

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

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

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

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

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

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

374

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

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

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

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

rem блоки представляют собой root ЭМ размер. Это же 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 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 и 10px что означает любое значение, вы могли бы написать в px может быть преобразован непосредственно в rem натыкаясь на десятичный знак.

padding: 20px;

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

padding: 2rem;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-1

да. Или, скорее, нет.

-3

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

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

другие шкалы измерения, но не так чисто, как их.

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

-4

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

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

-5