Доводы в пользу применения rem в CSS

Перевод статьи «Secrets to using rem in CSS: CSS Tips».

Photo by cottonbro from Pexels

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

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

Единицы измерения 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]

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх