Я хотел бы похвалить ответ Джош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. Если вы найдете такой пример, пожалуйста, поделитесь им со мной.
