Перевод статьи «Secrets to using rem in CSS: CSS Tips».
Размеры современных девайсов постоянно меняются, а вариантов клиентского программного обеспечения для каждого продукта появляется все больше. Статические единицы измерения с такими задачами уже не справляются.
Кроме того, многие люди настраивают свой браузер, чтобы задать более крупный размер контента на всех посещаемых ими сайтах. Пиксели позволяют клиентам увеличивать и уменьшать масштаб. Но настройки контента, выполненные в компьютере или браузере, не будут иметь никакого влияния.
Единицы измерения rem позволяют создавать сайты, сохраняющие пропорции между компонентами, а также масштабирующиеся по желанию клиента. А ведь если человек устанавливает в своих настройках больший размер контента, значит, для него это важно, это позволит ему с удобством пользоваться вашим сайтом. Поэтому ваш сайт должен реагировать на подобные настройки!
За последние пару лет я перестала использовать пиксели в качестве единиц измерения и всем советую поступать так же. Давайте рассмотрим, почему вам следует использовать единицы rem.
rem или em?
Но сначала мы должны прояснить разницу между единицами em и rem. Оба варианта — относительные единицы измерения. Размер шрифта, заданный при помощи этих единиц, рассчитывается. При расчетах используется некая база, которая служит множителем для значения, выраженного в em или rem.
Пример:
/*Базовый fontsize - 16px*/ 1rem = 16px 2rem = 32px 1em = 16px 2em = 32px
Разница между единицами в том, что единицы rem в качестве базы всегда используют значение корневого элемента (html), а em — значение своего контейнера (родительского элемента).
Пример:
/*Базовый fontsize - 16px*/ /*fontsize родительского элемента - 20px*/ 1rem = 16px 2rem = 32px 1em = 20px 2em = 40px
Что такое значение корневого элемента?
Базовый размер шрифта по умолчанию устанавливается браузером. При этом в большинстве браузеров 1 rem = 16 px. Это означает, что вы даже можете использовать стандартизированную 8-пиксельную сетку, поскольку 0,5 rem = 8 пикселей.
Если изменить font-size элемента html, можно установить базовое значение по своему усмотрению. Но весь смысл в том, что по умолчанию значение задает браузер. Это отдает контроль в руки пользователя, который может менять настройки в браузере.
Fluid-элементы
Используя единицы rem и позволяя браузеру (и пользователю) управлять базовым значением, вы создаете масштабируемые элементы, сохраняющие свою форму при увеличении или уменьшении размера.
Таким образом можно создавать по-настоящему «текучие» и гибкие макеты. Они будут прекрасно масштабироваться и отлично выглядеть, какие бы настройки ни задал пользователь.
Пример:
h1 {
font-size: 2rem;
}
p {
font-size: 1rem;
}
Заголовок всегда будет крупнее, чем текст абзаца, независимо от его базового размера. Они масштабируются вместе. То же самое и с кнопками, font-size, border-radius и padding — все масштабируется вместе с базовым размером.
А как насчет пикселей?
Пиксели по-прежнему применяются в вебе. Во многих случаях вам требуется фиксированное значение, не зависящее от предпочтений пользователя. Например, пиксели по-прежнему хороши для установки границ, которые не всегда нужно масштабировать.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
