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

322

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

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

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

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

  • 2
    Это хороший ресурс, комментариев еще больше: kyleschaeffer.com/best-practices/…
  • 1
    Я читал это, но Рем не упоминается в этой статье. Кроме того, он не объясняет свою точку зрения: « Одна проблема с пиксельным блоком заключается в том, что он не масштабируется вверх для читателей с ослабленным зрением или не подходит для мобильных устройств». Некоторые не согласны с этим утверждением и говорят, что мобильные устройства справляются идеально с пикселями единиц.
Показать ещё 4 комментария
Теги:
distance
units-of-measurement

11 ответов

359
Лучший ответ

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

Факты

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

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

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

  • Размеры, указанные в 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). Это связано с тем, что в меню размера шрифта браузера просто изменился размер корневого шрифта. Таким образом, если вы указали размеры шрифта в px, они не будут масштабироваться при изменении параметра размера шрифта в браузере.

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

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

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

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

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

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

Поделиться
  • 2
    Это потрясающий ответ. Спасибо за детали!
  • 1
    отличный ответ, спасибо
Показать ещё 17 комментариев
124

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

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

Обзор блока

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

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 node, если вы хотите изменить то, что 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, используйте % units.

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

Очевидный размер шрифта :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;
}

и <<244 > равно 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, вы можете использовать микшины или переменные для управления вашими мультимедийными запросами, что полностью замаскирует проблему.

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

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

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

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

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

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

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

Поделиться
  • 0
    Я знаю, что уже поздно, но мне нравится способ использования REM, но у меня больше всего проблем с использованием rem, когда я использую matrix() с javascript, то есть с помощью матрицы translate значения используют px (поправьте меня, если я ошибаюсь), и я так запутался с этим.
  • 3
    @Ampersanda, в JavaScript вы в основном будете использовать вычисленные значения пикселей. Моя рекомендация - по возможности переключать классы, чтобы CSS мог управлять тем, как все выглядит. В некоторых случаях вам не удастся избежать использования JS для вычисления значений пикселей, поэтому лучше всего рассчитывать значение пикселей из состояния DOM.
Показать ещё 3 комментария
42

В этой статье довольно хорошо описаны плюсы и минусы 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 , так как вы обычно хотите точно определить размер элементов.
Показать ещё 4 комментария
7

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

josh3736 ответ хороший, но чтобы обеспечить контрапункт через 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) имеют ошибку размера шрифта, возникающую, когда корневой элемент имеет размер в процентах ».
  • 0
    Кроме того, по as of March 27 they claim 93.78% support. На момент написания этого комментария, caniuse показывает только 91,79% полной поддержки браузера. Глядя на ваш процент, я почти уверен, что вы также включили поддержку глючного браузера (в настоящее время 2,8%, что может быть истолковано как оптимистичное покрытие в 94,6%, но факт в том, что эти 2,8% идут с ошибками, неполным или даже полным). отсутствие поддержки ... как отмечалось в моем предыдущем комментарии: каждая ошибка является результатом различных версий браузера и комбинаций операционной системы.) Вы можете исправить свой ответ соответствующим образом ...
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 вверх. Если вы просто хотите создать тонкую однопиксельную границу, скажите так. Если у вас есть дисплей с высоким разрешением DPI, это не будет очевидно для вас во время тестирования, поэтому в какой-то момент обязательно проверьте на 96-DPI дисплее.
  • Не работайте в субпикселях, чтобы сделать что-то необычным на дисплеях с высоким разрешением. Некоторые браузеры могут его поддерживать, особенно на дисплеях с высоким разрешением DPI, но это не-нет. Большинство пользователей предпочитают большие и четкие, хотя в Интернете мы учили разработчиков. Если вы хотите добавить расширенные детали для своих пользователей с помощью самых современных экранов, вы можете использовать векторную графику (читайте: SVG), которую вы должны делать в любом случае.
Поделиться
  • 0
    pt предназначен для печатных СМИ и никогда не должен использоваться для экранов
  • 0
    @sf CSS определяет pt и px так, что они всегда имеют одинаковое соотношение, несмотря на то, что это не является технически точным использованием этих терминов (72pt = 96px = 1in). На самом деле, в CSS, px - это на самом деле не один пиксель устройства. На моем экране 1 пиксель составляет 2 пикселя устройства. Преимущество использования pt перед px заключается в том, что вы можете легко указывать размеры элементов относительно размеров, связанных с текстом.
1

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

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

Поделиться
  • 0
    Хорошо. Но адаптивный дизайн так же легко сделать с правильными единицами px (просто напишите ваши медиа-запросы, основанные на px вместо em)?
  • 0
    Однако вы можете уменьшить размер шрифта, так как ширина области просмотра вашего сайта уменьшается, тогда вы можете изменить размер шрифта body текста, и все изменится вместе с ним.
Показать ещё 2 комментария
-1

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

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

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

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

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

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

Поделиться
-2

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

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

UPDATE:

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

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

Поделиться
  • 0
    Итак, ваш ответ в том, что это не имеет значения? Или есть определенные ситуации, в которых вы бы ценили одно над другим? И если да, то в каких ситуациях это будет иметь место?
  • 0
    @ Самуил, да, могут быть случаи, когда вы захотите использовать один или другой. Я обновил свой ответ с дополнительной информацией.
Показать ещё 6 комментариев
-4

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

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

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

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

Поделиться
  • 3
    Но в настоящее время большинство браузеров одинаково масштабируют все элементы страницы (если вы не отрегулируете базовый размер шрифта), так что преимущество использования (r) em не верно для современных браузеров, верно?
  • 0
    Это так и не так, хотя вы правы в том, что вы говорите, речь идет скорее о коэффициенте масштабирования, а не о дельте масштабирования. Дельта всегда будет одинаковой независимо от используемого измерения, но масштабный коэффициент (при условии, что математические операции выполнены правильно) будет корректироваться по мере необходимости, например, для широкоэкранного монитора по сравнению со стандартным монитором или прямоугольных пикселей против квадратных пикселей. Так как значения на самом деле основаны на истинном измерении принтера, масштабирование всегда будет более подходящим, другие (например,%) в лучшем случае часто являются дельта-смещением.
Показать ещё 6 комментариев
-5

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

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню