Пиксели против REM против EM: разбивка размеров CSS

Должны ли вы использовать px или rem или em?

PX против REM против EM с примерами

Я так запутался... что мне использовать?🤔 Давайте узнаем

Когда я начал изучать CSS, я столкнулся со всеми этими единицами измерения, и у меня возникло много вопросов, таких как

• Должен ли я использовать только px?

• Есть ли разница в пользовательском опыте?

• Есть ли соглашение о том, когда что использовать?

Итак, давайте начнем с пикселей, а в конце я покажу вам, как эти 3 единицы работают по-разному, на простом примере.

пикселей

px — одна из самых известных единиц измерения в CSS. Как правило, дизайнеры работают в px.Так почему бы не использовать только px? Причина в доступности. Когда вы как разработчик используете px в качестве единицы измерения размера шрифта, высоты строки и интервала или размера элемента, вы явно устанавливаете размеры всех этих вещей независимо от того, что есть у пользователя, в качестве настройки по умолчанию. Например, предположим, что если есть пользователь, который установил размер шрифта своего браузера как «20px», но вы установили размер шрифта вашей веб-страницы как «16px», тогда браузер будет отображать содержимое вашей веб-страницы в «16px», а не в «20px». и в этом проблема. Хотя пользователь может увеличивать или уменьшать масштаб с помощью Ctrl + или Ctrl -, тем не менее, как разработчик, вы должны следовать передовым методам.

REM

REM расшифровывается как Root EM. rem используется для установки размера шрифта на основе размера шрифта корневого элемента. Это означает, что «1rem = размер шрифта HTML-элемента».

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

Теперь вы можете подумать, что если бы вы установили размер шрифта HTML-элемента как 100%, то каким будет значение 1rem? 1rem будет таким же, как размер шрифта веб-браузера по умолчанию. .

Теперь давайте займемся другой проблемой. Допустим, вы установили размер шрифта корневого элемента как 16px, а в каком-то другом элементе вы хотите, чтобы размер шрифта был 20px, но поскольку вы работаете с единицей rem, 1rem = 16px(размер шрифта корневого элемента) какое значение rem будет эквивалентно 20px. Здесь вам нужно рассчитать, и это будет (20px/16px) = 1.25rem.

Как вы только что видели, всякий раз, когда вы хотите получить эквивалентное значение px в вещах, вы должны выполнить это сложное вычисление. Итак, чтобы немного упростить задачу, вы можете просто установить размер шрифта корневого элемента как 10px, а затем вы можете просто разделить любое значение в пикселях на 10, и вы получите эквивалентное значение rem. Например, «24px» будет «2.4rem», «32px» будет «3.2rem».

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

Вам может быть интересно, как это влияет на доступность?

Вы устанавливаете свойство своего элемента в rem, но в корневом элементе оно по-прежнему преобразует значение rem в значение px. Но подождите, есть обходной путь, с помощью которого вы можете упростить вычисления, а пользователи могут получить доступ к ним. Вы можете просто установить размер шрифта корневого элемента на 62,5%, и все готово.

Теперь вам может быть интересно, как это работает и почему 62,5%, а не любое другое значение?

Теперь позвольте мне ответить на это. Чтобы сохранить доступность, вам нужно установить размер шрифта корневого элемента в процентах, но мы также хотим, чтобы значение размера шрифта было равно 10px, чтобы мы могли легко выполнять вычисления. Чтобы это произошло, мы должны сделать это --> (10px/16px)*100 == 62,5%. Вот как возникло магическое число. Но подождите, все это не идеально, идеальной ситуацией было бы установить размер шрифта корневого элемента равным 100% и выполнить сложные вычисления, и здесь мы можем воспользоваться помощью препроцессоров CSS, таких как SASS, LESS или что-то еще. С помощью этих CSS-препроцессоров у нас может быть функция, которая вычисляет все эти числа за нас, и нам не о чем беспокоиться😁.

Теперь, наконец, давайте немного поговорим о EM.

ЭМ

EM очень похож на REM, но есть ключевое отличие, которое я покажу вам на примере.

РЕЗЕРВНЫЙ ПРОСМОТР

REM ТЕКСТ

ЭМ-ПРОСМОТР

ЭМ-ТЕКСТ

HTML {

размер шрифта: 100%;

.rem {

цвет фона: желтый;

размер шрифта: 2rem; / здесь 2rem = (162==32px) */

нижняя граница: 1re;

.em {

цвет фона: оранжево-красный;

размер шрифта: 2em; / здесь 2em = (162 == 32px) */

нижняя граница: 1em; / здесь 1em = 32px /

Итак, приступим к объяснению. Здесь, в приведенном выше примере вы можете ясно видеть, что с единицей em маржа-нижняя граница в два раза больше, чем маржа-нижняя единица rem. Вот где em и rem расходятся. REM всегда берет размер шрифта корневого элемента и вычисляет его значение везде, в то время как EM при использовании со свойством размера шрифта всегда будет принимать размер шрифта родительского элемента в качестве корневого значения, но если вы будете использовать некоторое другое свойство в текущем элементе с единицей измерения em, такой как margin-bottom, тогда единица em вычислит свое значение, сохраняя размер шрифта текущего элемента в качестве корневого значения. Вот почему в приведенном выше примере в rem значение margin-bottom равно 16px, потому что оно получено с использованием размера шрифта корневого элемента, а в em значение margin-bottom равно 32px, потому что оно получено из своего значения. значение, используя размер шрифта текущего элемента, который равен 2em.

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

ПРОСМОТР PX

ТЕКСТ PX

РЕЗЕРВНЫЙ ПРОСМОТР

REM ТЕКСТ

ЭМ-ПРОСМОТР

ЭМ-ТЕКСТ

HTML {

размер шрифта: 100%;

.px {

цвет фона: зеленый;

размер шрифта: 16px;

нижняя граница: 16px

.rem {

цвет фона: желтый;

размер шрифта: 1rem; / здесь 2rem = (162==32px) */

нижняя граница: 1re;

.em {

цвет фона: оранжево-красный;

размер шрифта: 1em; / здесь 2em = (162 == 32px) */

нижняя граница: 1em; / здесь 1em = 32px /

Размер шрифта по умолчанию в моем браузере составляет 16 пикселей.

После изменения размера шрифта моего браузера на 24px, это выглядит примерно так:

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

Если вы дочитали до этого места, то поздравляю 🎉 вы отлично поработали. Теперь есть одна вещь, которую я еще не рассмотрел, а именно, когда использовать px, rem и em. Итак, давайте сделаем это сейчас.

Когда использовать px?

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

Когда использовать rem?

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

Когда использовать em?

Я предпочитаю использовать em всякий раз, когда размер шрифта зависит от размера шрифта его родительского элемента.

Заключение

В конце концов, именно вы должны решить, какую единицу выбрать, и это также зависит от того, кем будет веб-сайт, возможно, иногда доступность не так важна, тогда вы можете использовать только «px».

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

• Первоначально опубликовано [здесь] (https://devquarters.com/px-vs-rem-vs-em-with-examples)*