Каким образом rem отличается от em в CSS?

Ответ 1

EM относятся к размеру их родительского шрифта

REM относятся к базовому размеру шрифта

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

Ответ 2

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

Ответ 3

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

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

Ответ 4

Вот пример. 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>

Ответ 5

В основном 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>

Ответ 6

Резюме:

• 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>

Ответ 7

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

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

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

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