rem, em — CSS — Дока

  1. Кратко
  2. Пример
  3. Как пишется
  4. Как понять
  5. Подсказки
  6. На практике
    1. Realetive советует
    2. Алёна Батицкая советует

Кратко

Скопировано

Задаёт размер относительно величины шрифта родительского элемента — em (от ephemeral unit — «относительная единица измерения») или корневого элемента <html> или <svg> — rem (от root ephemeral unit — «главная относительная единица»).

Пример

Скопировано

Пусть размер шрифта корневого элемента <html> будет равен 16 пикселям:

html {  font-size: 16px;}
          html {
  font-size: 16px;
}

Тогда размер шрифта элемента с классом block будет равен 16px × 1,5 = 24px:

.block {  font-size: 1. 5rem;}
          .block {
  font-size: 1.5rem;
}

Значение в единицах em всегда рассчитывается от размера шрифта элемента: оно либо наследуется от родителя, либо задаётся на самом элементе. Продолжая наш пример, если элементу блока просто задать ширину 5em, то для расчёта будет использован унаследованный размер шрифта: 16px × 1,5 × 5 = 120px.

.block__elem {  width: 5em;}
          .block__elem {
  width: 5em;
}

А если самому элементу задать размер шрифта 2em, то к унаследованному размеру добавится ещё один множитель: 16px × 1,5 × 5 × 2 = 240px.

.block__elem {  width: 5em;  font-size: 2em;}
          .block__elem {
  width: 5em;
  font-size: 2em;
}

Как пишется

Скопировано

Как и все остальные единицы измерения в CSS — em и rem пишутся сразу после числового значения без пробела:

. selector {  width: 10em;}.selector {  margin: 5rem;}
          .selector {
  width: 10em;
}
.selector {
  margin: 5rem;
}

Как понять

Скопировано

Единицы em и rem используют для вычисления размера шрифта, но применимы вычисленные значения для любых свойств, в которых указываются размеры: width, height, padding, margin, border-width и так далее.

Итоговое значение размера, заданное через em и rem, вычисляется динамически и меняется, когда значение, от которого вычислялось em и rem, изменится.

Подсказки

Скопировано

💡 Часто при работе с rem для селектора

html пишется следующее CSS-правило:

html {  font-size: 62.5%;}
          html {
  font-size: 62.5%;
}

Магическое число 62. 5% равняется 10 пикселям при учёте, что стандартный размер шрифта браузера по умолчанию равен 16 пикселям. 16px = 100%, 10px = 62.5%.

Когда 1rem = 10px гораздо проще вести все расчёты при вёрстке.

На практике

Скопировано

Realetive советует

Скопировано

🛠 Если размер страницы был изменён глобально, то есть через настройки операционной системы или с помощью Ctrl + / Ctrl -, то значение шрифта у <html> также пропорционально изменится, даже если оно было задано явно. Такое масштабирование будет происходить более пропорционально, если при вёрстке вы сможете найти закономерности размеров элементов относительно размера шрифта.

Алёна Батицкая советует

Скопировано

🛠 При помощи относительных единиц шрифта можно классно верстать адаптивные сайты. Например, если в мобильном и десктопном макетах пропорции одинаковые, и меняются только фактические размеры, то можно сделать, например, так:

html {  /* 10px */  font-size: 62. 5%;}.title-block {  /* 10rem * 10px = 100px */  width: 10rem;  /* 2rem * 10px = 20px */  font-size: 2rem;}@media (max-width: 640px) {  html {    /* 8px */    font-size: 50%;  }}
          html {
  /* 10px */
  font-size: 62.5%;
}
.title-block {
  /* 10rem * 10px = 100px */
  width: 10rem;
  /* 2rem * 10px = 20px */
  font-size: 2rem;
}
@media (max-width: 640px) {
  html {
    /* 8px */
    font-size: 50%;
  }
}

Без дополнительных правил ширина блока уменьшилась до 80px, а размер шрифта внутри до 16px.

Всего одним правилом мы масштабировали размеры блока и шрифта внутри него. Очень элегантное решение 😇

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

vw, vh, vmin, vmax

ctrl + alt + ←

→

CSS-анимации

ctrl + alt + →

em и rem — всё, что нужно знать

Опубликовано:

  • Frontend
  • CSS

Источник: «rem vs em — Everything you need to know»

CSS — важная часть дизайна любого сайта и у него есть нюансы. Один из них — разница между em и rem, когда и зачем их нужно использовать.

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

В этой статье мы рассмотрим всё, что связано с em и rem, их различия, когда и как их использовать, а также практические примеры em и rem в действии. К концу этой статьи у вас будет чёткое представление об обоих значениях. Давайте приступим к делу.

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

Единицы измерения

em и rem в CSS

Когда мы выбираем способ указать размер в CSS, мы избалованы выбором. В CSS все единицы измерения делятся на две категории.

Абсолютные единицы измерения: как следует из названия они являются абсолютными, фиксированными и ни на что не реагируют. Это означает, что бы не случилось — они будут одного размера. Абсолютные единицы измерения включают:

  • mm — миллиметры;
  • Q — четверть миллиметра 1 Q = ¼ mm
  • cm — сантиметры 1 cm = 10 mm;
  • in — дюймы;
  • px — пиксели, 1 px = 1/96 in;
  • pt — пункты, 1 pt = 1/72 in;
  • pc — пики, 1 pc = 12 pt.

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

  • % — размер в % относительно ширины родительского блока;
  • lh — высота строки элемента;
  • ch — ширина символа 0;
  • ex — x-высота шрифта, измеряется в высоте символа x в нижнем регистре,
  • vh — % высоты окна браузера;
  • vw — % ширины окна браузера;
  • vmax — большее значение высоты vh или ширины окна браузера vw;
  • vmin — меньшее значение высоты vh или ширины окна браузера vw.

И единицы измерения о которых мы будем говорить: em — размер шрифта относительно размера шрифта родительского элемента и rem — размер шрифта относительно размера шрифта корневого элемента.

Что такое

em

Как уже говорил выше, em в CSS — относительная единица измерения, используемая для определения размера элементов на веб-странице, в основном размера шрифта. Поскольку это относительная единица измерения — 1 em равен размеру шрифта установленном в родительском элементе. Это означает, что если вы установите размер шрифта в родительском <div> в 20px и установите размер шрифта дочернего <div> равный 2em, то размер шрифта в дочернем элементе будет равен 40px.

Давайте напишем HTML код:

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
I'm parent div set to 20px
<div>
I'm the child div set to 2em, i.e 40px.
</div>
</div>
</body>
</html>

И CSS:

.parent{
font-size: 20px;
}
. child{
font-size: 2em;
}
p {
font-size: 1.5em;
}

Вот, что у нас получилось:

See the Pen

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

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

p {
font-size: 1.5em;
}

В этом примере для свойства font-size установлено значение 1.5em. Это означает, что размер текста в элементе параграф <p> будет в полтора раза больше размера шрифта браузера по умолчанию, если нет прямого родительского элемента.

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

Используя соответствующее CSS свойство, единицы измерения em можно использовать для установки размера других свойств элементов, таких как margin, padding и border.

Что такое

rem

Теперь, когда мы знаем что такое em, давайте рассмотрим rem. rem — ещё одна относительная единица измерения в CSS, которая расшифровывается как root em — корневой em. Поскольку мы знаем, что em равен размеру шрифта родительского элемента, мы можем сделать вывод, что корневой em относится к размеру шрифта корневого элемента, которым обычно является элемент <html>.

Не совсем понятно? Разберём ещё.

Как и em, rem наследует свой размер от родительского элемента, но родительский элемент на который смотрит rem, это не вышестоящий <div> или <section>, а самый первый элемент окружающий весь код, то есть элемент <html>. Давайте рассмотрим пример, используя предыдущий код. Тот же HTML код, только с дополнительным <div>.

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
I'm parent div set to 20px
<div>
I'm the child div set to 2em, i.e 40px.
</div>
<div>
I'm the child div set to 2em, i.e 60px.
</div>
</div>
</body>
</html>

И добавим к предыдущему CSS коду следующий фрагмент:

html{
font-size: 30px;
}
.child-2{
font-size: 2rem;
}

Результат будет таким:

See the Pen

Как видите, несмотря на то, что элемент <div> находится внутри других <div> элементов, он полностью возвращается к элементу <html>, что бы взять его размер шрифта.

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

В чём разница между

em и rem

После прочтения предыдущей части статьи вы уже знаете в чём заключается разница между em и rem, но для ясности ещё раз напомню. В CSS единица измерения rem относится только к корневому элементу документа, а em относится непосредственно к родительскому элементу. Это означает, что размеры em наследуются от родительских элементов, а размеры rem только от корневого элемента.

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

em, а когда rem

rem рекомендуется использовать для глобальных значений, таких как font-size, margin и padding, особенно если вы хотите задать один font-size для всего документа и обеспечить его равномерное масштабирование, без влияния родительских элементов.

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

Возможные проблемы при использовании

em и rem

Не всё так идеально, как хотелось бы и вот несколько проблем с которыми вы можете столкнуться используя em и rem:

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

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

Дополнительные материалы

Предыдущая Статья

PHP: Редирект 301 и 302

Следующая Статья

Laravel: Использование генераторов для пагинации

бэр | единица измерения

  • Развлечения и поп-культура
  • География и путешествия
  • Здоровье и медицина
  • Образ жизни и социальные вопросы
  • Литература
  • Философия и религия
  • Политика, право и правительство
  • Наука
  • Спорт и отдых
  • Технология
  • Изобразительное искусство
  • Всемирная история
  • Этот день в истории
  • Викторины
  • Подкасты
  • Словарь
  • Биографии
  • Резюме
  • Популярные вопросы
  • Обзор недели
  • Инфографика
  • Демистификация
  • Списки
  • #WTFact
  • Товарищи
  • Галереи изображений
  • Прожектор
  • Форум
  • Один хороший факт
  • Развлечения и поп-культура
  • География и путешествия
  • Здоровье и медицина
  • Образ жизни и социальные вопросы
  • Литература
  • Философия и религия
  • Политика, право и правительство
  • Наука
  • Спорт и отдых
  • Технология
  • Изобразительное искусство
  • Всемирная история
  • Britannica объясняет
    В этих видеороликах Britannica объясняет различные темы и отвечает на часто задаваемые вопросы.
  • Britannica Classics
    Посмотрите эти ретро-видео из архивов Encyclopedia Britannica.
  • Demystified Videos
    В Demystified у Britannica есть все ответы на ваши животрепещущие вопросы.
  • #WTFact Видео
    В #WTFact Britannica делится некоторыми из самых странных фактов, которые мы можем найти.
  • На этот раз в истории
    В этих видеороликах узнайте, что произошло в этом месяце (или любом другом месяце!) в истории.
  • Студенческий портал
    Britannica — лучший ресурс для учащихся по ключевым школьным предметам, таким как история, государственное управление, литература и т. д.
  • Портал COVID-19
    Хотя этот глобальный кризис в области здравоохранения продолжает развиваться, может быть полезно обратиться к прошлым пандемиям, чтобы лучше понять, как реагировать сегодня.
  • 100 женщин
    Britannica празднует столетие Девятнадцатой поправки, выделяя суфражисток и политиков, творящих историю.
  • Спасение Земли
    Британника представляет список дел Земли на 21 век. Узнайте об основных экологических проблемах, стоящих перед нашей планетой, и о том, что с ними можно сделать!
  • SpaceNext50
    Britannica представляет SpaceNext50. От полёта на Луну до управления космосом — мы изучаем широкий спектр тем, которые подпитывают наше любопытство к космосу!

Содержание

  • Введение

Краткие факты

  • Связанный контент

Rem — Energy Education

Energy Education

Меню навигации

ИСТОЧНИКИ ЭНЕРГИИ

ИСПОЛЬЗОВАНИЕ ЭНЕРГИИ

ЭНЕРГЕТИЧЕСКОЕ ВОЗДЕЙСТВИЕ

ИНДЕКС

Поиск

Рентген Эквивалент Человек или REM является более старой единицей эквивалентной дозы, не относящейся к системе СИ. [1] В зависимости от изучаемого эффекта РЭМ также можно отнести к рентгеноэквивалентным млекопитающим. [2] Измерение количества радиационного повреждения тканей человека с помощью рентгеновских лучей, гамма-излучения или любого другого типа ионизирующего излучения, такого как альфа- и бета-излучение.

[1] Однако REM не измеряет количество поглощенной энергии или количество накопленной ионизации. [3] REM был впервые предложен в 1945 году до того, как Зиверт стал установленной единицей СИ. Сто бэр можно определить как один зиверт или 1 бэр = 1 сЗв = 10 -2 Св. [4]

В следующей таблице приведены величины излучения в единицах СИ и других единицах. [5] [6]

Количество Имя Символ Блок Система
Воздействие Рентген Р 2,58×10 -6 Кл/кг Не входит в систему СИ
Поглощенная доза Рад рад 10 -2 Гр Не входит в систему СИ
Серый Гр Джкг -1 СИ
Деятельность Кюри Си 3. 7×10 10 Бк Не входит в систему СИ
Беккерель Бк с -1 СИ
Эквивалент дозы Рентгеновский эквивалент человека рем10 -2 Св Не входит в систему СИ
Зиверт Св Джкг -1 СИ

Конвертер единиц бэр

Для дальнейшего чтения

  • Энергия
  • Атомная энергетика
  • Уран
  • Деление
  • Или просмотрите случайную страницу

Ссылки

  1. ↑ 1.0 1.1 U.S.NRC. (2016, 21 июня).REM (Рентгеновский эквивалент человека) [Онлайн]. Доступно: http://www.nrc.gov/reading-rm/basic-ref/glossary/rem-roentgen-equivalent-man.html
  2. ↑ С.Т. Кантрил и др., «Доза толерантности», Комиссия по атомной энергии США, Аргоннская национальная лаборатория, Отдел технической информации, Ок-Ридж, Теннесси, MDDC-1100.

    No related posts.