Чем rem отличается от em в CSS?

В исходном коде веб-сайта я иногда видел, как разработчики используют этот remмодуль. Это похоже на em? Я попробовал посмотреть, что он делает на самом деле, но что это относительно?

Демо

HTML

<div>Hello <p>World</p></div>

CSS

div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}

EMs относительно размера шрифта их родителя

REMs относительно базового размера шрифта

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

Единицаrem (корень em) обозначает размер шрифта корневого элемента. В документе HTML корневым элементом является htmlэлемент. Поддержка браузера по-прежнему ограничена.

В то время как em относится к размеру шрифта своего прямого или ближайшего родителя, rem только относительно размера шрифта html (корневого).

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

Вот пример. divsразмер с remизменением , как мы изменить font-sizeчасть htmlэлемента. В то время как те , размером с emединственным изменением , как мы изменить font-sizeиз div.

$(function() {
  var htmlSize = $('input#html');
  htmlSize.change(function() {
    $('html').css('font-size', htmlSize.val() + 'px');
  });

  var divSize = $('input#div');
  divSize.change(function() {
    $('div').css('font-size', divSize.val() + 'px');
  });
});

* {
  float: left;
  font-size: 20px;
  margin:2px;
}
label {
  clear:both;
}
div {
  border: thin solid black;
}
div.rem1 {
  width:4rem;
  height: 4rem;
  clear: both;
}
div.rem2 {
  width: 3rem;
  height: 3rem;
}
div.em1 {
  width: 4em;
  height: 4em;
  clear: both;
}
div.em2 {
  width: 3em;
  height: 3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Change html font-size
  <input id="html" type='number' value="20" min="18" max="30" />
</label>
<div class="rem rem1">rem</div>
<div class="rem rem2">rem</div>
<label>Change div font-size 
  <input id="div" type='number' value="20" min="18" max="30" />
</label>
<div class="em em1">em</div>
<div class="em em2">em</div>

В основном em относится к ближайшему родительскому элементу в CSS, а rem относится к родительскому элементу страницы, который обычно является тегом html ...

Вы четко увидите разницу, если запустите приведенный ниже css и как родитель влияет на это:

html {
  font-size: 16px;
}

.lg-font {
  font-size: 30px;
}

p.rem {
  font-size: 1rem;
}

p.em {
  font-size: 1em;
}

<div class="lg-font">
  <p class="em">Hello World - em</p>
</div>

<div class="lg-font">
  <p class="rem">Hello World - rem</p>
</div>

Резюме:

• rem: CSSединица измерения относительно размера шрифта htmlэлемента.
• em: CSSединица измерения относительно размера шрифта родительского элемента.

Пример:

.element {
  width: 10rem;
  height: 10rem;
  background-color: green;
  font-size: 5px;
}

.innerElement {
  width: 10em;
  height: 10em;
  background-color: blue;
}

<div class="element">
  <div class="innerElement"></div>
</div>

В приведенном выше примере размер зеленого квадрата составляет 160 на 160 пикселей (если у вас нет браузера по умолчанию at 16px). Это происходит потому , что браузер по умолчанию в htmlэлементе font-sizeесть 16pxи 10rem*16px = 160.

Внутренний квадрат 10emбольшой. Поскольку его родительским элементом является 5pxквадрат, это 5em * 10px = 50px.

Чем это полезно:

Установив для всех устройств remследующие преимущества:

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

rem, em и px - разные единицы размера шрифта в css.

em em равно вычисленному размеру шрифта родительского элемента. Пример: элемент div, определенный с font-size: 16px, его дочерние элементы 1em = 16px.

Значения rem rem относятся к корневому элементу html. Пример: Если размер шрифта корневого элемента составляет 16 пикселей, 1 rem = 16 пикселей для всех элементов.

Ссылка: https://medium.com/code-better/css-units-for-font-size-px-em-rem-79f7e592bb97

https://stackoverflow.com/a/13941345/9093112 - это лучший ответ, но я хочу только добавить

Default browser size is 16px = 1em = 1 rem

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

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

В приведенном ниже примере размер шрифта три em в дочернем элементе заголовка дает 72 пикселя просто потому, что это в три раза больше размера родительского шрифта, который составляет (150/100) * 16 = 24 пикселей. Что касается длины, она немного другая. Заполнение 2em в заголовке, поскольку это измерение длины, использует размер шрифта текущего элемента в качестве ссылки, и мы уже знаем, что это 24 пикселя, поэтому 2em приведет к 48-пиксельному отступу, понятно? Это тонкая разница, но важная. Когда вы используете em, если это для шрифтов, ссылка является родительской, а для длины ссылка является текущим элементом.

html,body{
font-size:16px;
width:80vw;
}
header{
font-size:150%;
padding 2em;
margin-bottom:10rem;
height:90vh;
widht 1000px;
}
header-child{
font-size:3em;
padding:10%;
}

Что касается rem, он фактически работает одинаково как для размера, так и для длины шрифта, потому что он всегда просто использует размер корневого шрифта в качестве ссылки. Это означает, что заполнение 10 rem, которое у нас есть, приведет к 160 пикселям, потому что размер корневого шрифта равен 16.

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

Бэр относительные единицы вычисляется только корневой элемент HTML , таким образом, размер шрифта родительского элемента не влияет на его

Единицы измерения CSS: em , rem оба относительно размера их родительского фасада. Размер будет меняться в зависимости от размера шрифта Родителя. Пример:
rem : 100% размера шрифта корневого элемента.
em : 100% размера родительского шрифта.