Если вы откроете любую таблицу стилей веб-сайта, вы увидите rems, ems, пиксели или любую их комбинацию. В стилях CSS это основные единицы измерения, которые используются. Независимо от того, разрабатываете ли вы сайт с нуля или «унаследовали» ранее разработанный сайт, который вам необходимо поддерживать, это важно для типографики, интервалов и других размеров в визуальном дизайне.

Чем одна единица измерения лучше другой? Однозначного ответа нет, и в зависимости от ситуации один может быть предпочтительнее другого. Знание варианта использования и того, что будет работать лучше всего, поможет определить наилучшее измерение для вашего стиля.

Пиксели

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

Хотя пиксели великолепны, у них есть некоторые ограничения. Поскольку это такое заданное измерение, пользователи не могут изменить размер текста браузера по умолчанию в настройках браузера. Вещи не масштабируются, как это происходит с ems и rems, что затрудняет изменение размера с точки зрения доступности для пользователя. Можно возразить, что пользователь может просто увеличить масштаб, а не заходить в настройки браузера. Нет правильного или неправильного ответа, это просто то, что нужно иметь в виду.

Кто они такие?

Пиксели — это единица измерения, основанная на установленном размере. Они являются единицей измерения размеров на экране и используются, когда требуется точный дизайн. Мы говорим такие вещи, как «разрешение в пикселях», поэтому мы привыкли к этому измерению.

Пример будет выглядеть примерно так:

.main-header p {
font-size: 14px;
}

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

Эмс

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

Кто они такие?

Если вы хорошо разбираетесь в классической типографике, вы, вероятно, узнали «em», потому что это единица измерения, пришедшая из мира печатного шрифта. Используя это как единицу в типографике, это измерение равно текущему указанному размеру точек. Например, один em в шрифте размером 16 пунктов равен 16 пунктам. Эта единица одинакова для всех шрифтов данного размера.

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

Понимание эмс

В большинстве случаев, если по умолчанию в браузере не установлено другое значение, размер em составляет 16 пикселей. Когда вы видите 1,5 em, это будет 24 пикселя. Хотя это не всегда так просто. Что происходит, когда задействована вложенность? Это может быть как удобно, так и запутанно. Знание того, как все устроено при работе с ems, безусловно, поможет разгадать любую загадку. Каков размер абзаца «Я вложен» ниже?

<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>

.one, .two {

font-size: 0.5em;

}

.three {

font-size: 2em;

}

Здесь есть три блока div, и абзац достаточно вложен. При каскадировании DOM вам, возможно, придется проделать некоторую детективную работу. Допустим, мы работаем с em 16px, так как это наиболее распространено.

Класс .one умножает 1em на 0,5, что равно 0,5 em или 8 пикселям. С классом .two это снова умножается на 0,5, что составляет 0,25 em или 4px. Вещи становятся довольно маленькими, поэтому класс .three поможет. Мы возьмем 0,25 em и умножим его на 2. В результате получится 0,5 em или 8px.

Одна вещь, которая может помочь, — это установка размера HTML-элемента. Что-то вроде этого укажет установленный размер em вместо того, чтобы полагаться на em, установленный браузером. Давайте установим 1 em равным 20px. Если бы это использовалось в приведенном выше примере, применялись бы те же принципы вложения. Имейте в виду, однако, что мы указали размер в пикселях, так что это повлияет на возможность масштабирования текста с помощью параметра настройки браузера.

html {

font-size: 20px;

}

В дополнение к пикселям размер шрифта также может быть установлен в процентах. Дело в том, что ems может работать вместе с другими единицами измерения. Вы наверняка столкнетесь с этим, так как довольно часто для основного шрифта устанавливается процентное значение, чтобы помочь установить базовый уровень. Допустим, размер шрифта начинается с 62,5% от размера em. При размере em 16 пикселей размер шрифта будет 10 пикселей.

body {

font-size:62.5%;

}

Как только у вас появится понимание, ems может стать хорошим подспорьем для вашего проекта. Подгонка текста подэлементов к их родительским элементам, безусловно, может пригодиться. Кроме того, em позволяет легко указать больший отступ в текстовом контейнере, чем тот, который можно найти в интервале между словами, заставляя его следовать визуальному правилу близости. Связанные элементы будут сгруппированы визуально, с меньшим количеством беспорядка и упорядоченным макетом.

Еще одна замечательная особенность ems — преимущества доступности. Поскольку он относится к корню DOM, em идеально подходит для изменения размера всего дизайна в зависимости от предпочтений пользователя. В настройках браузера вы можете легко изменить размер шрифта по умолчанию, который затем изменит расчеты в ems для всего веб-сайта.

Ремс

Кто они такие?

Rems — довольно недавнее дополнение к временной шкале CSS. Эта единица измерения была введена в CSS3 и решает некоторые проблемы с пикселями и ems. С именем, похожим на «ems», вам может быть интересно, что означает «r». Оно происходит от термина «Root EM».

Корень — это элемент HTML. Размер, указанный в элементе HTML, является основой для этого измерения. Вы увидите, что мы использовали размер em для HTML-элемента; можно комбинировать два типа измерений.

html {
font-size: 1em;
}

.one {
font-size: 1.2rem; /* 1.2 x the value set in html */
}

Современные браузеры поддерживают rems, но обязательно проверьте с помощью BrowserStack, какие старые браузеры вам нужно поддерживать, прежде чем переходить на rems. Не позволяйте старым браузерам сдерживать вас; вы всегда можете указать резервный пиксел для чего-либо ниже IE9. Современные браузеры игнорируют пиксели, потому что предпочитают rems. Это может выглядеть примерно так:

.my-text {

font-size: 24px;

font-size: 1.5rem;

}

Понимание бэр

Помните математику, которую мы должны были сделать для вложенных элементов ems? Это не обязательно с rems. Все это основано на этом корневом элементе. Нам не нужно беспокоиться о родительских элементах, они всегда основаны на корне.

<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>

html {

font-size: 1em;

}

.one, .two {

font-size: 0.52em;

}

.three {

font-size: 2rem;

}

Здесь три блока div, а абзац достаточно вложен, как мы видели в примере с em. Опять же, предположим, что мы работаем с размером em 16px.

Классы .one и .two имеют назначенные размеры, но здесь они не имеют особого значения, потому что rems не влияет на вложенность, как это происходит с ems. Все, что действительно имеет значение, — это стиль .three, который равен 2 em. Абзац будет основан на HTML-элементе 1em. Это измерение будет удвоено, что даст нам 2 бэр или 32 пикселя.

Хотите равномерно масштабировать все? Просто отрегулируйте размер корневого элемента. Это также полезно при настройке размера браузера по умолчанию. Вы могли видеть, как ems позволяли это, rems тоже.

Гораздо меньше поводов для беспокойства относительно непредсказуемого поведения вложения с rems. Легко понять, где в игру вступает корневой элемент и как это влияет на ваш стиль при использовании rems.

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