Чим 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 відносно базового розміру шрифту

Це важливо, коли проміжні контейнери змінюють розмір шрифту. Це вплине на дочірні елементи з ЕМ, а на тих, хто використовує РЕМ - ні.

Одиницяrem (root em) означає розмір шрифту кореневого елемента. У документі HTML кореневим елементом є htmlелемент. Підтримка браузера все ще обмежена.

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

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 пікселів (якщо у вас немає браузера за замовчуванням 16px). Це відбувається тому , що браузер по замовчуванням в htmlелементі font-sizeє 16pxі 10rem* 16px= 160.

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

Як це корисно:

Встановивши всі одиниці, remмають такі переваги:

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

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

em Em em дорівнює обчисленому розміру шрифту батьківського елемента цього елемента. приклад: елемент div, визначений із розміром шрифту: 16px, його дочірні елементи 1em = 16px.

Значення rem rem відносно кореневого елемента html. напр .: Якщо розмір шрифту кореневого елемента становить 16 пікселів, 1 рем = 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 - це відносні одиниці на основі шрифтів, і різне використання ems для шрифтів або довжини, тому і ems, і rems засновані на шрифтах, але різниця між ними полягає в тому, що ems використовує батьківський або поточний елемент як посилання, тоді як rems використовуйте розмір кореневого шрифту як посилання.

Якщо ми хочемо використовувати ems для розмірів шрифтів, тоді посилання - це просто обчислений батьками розмір шрифту, подібний до того, що відбувається з відсотками.

У наведеному нижче прикладі розмір шрифту розміром до трьох символів у дочірньому елементі заголовка дає 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 відступів, які ми маємо тут, дадуть 160 пікселів, оскільки розмір кореневого шрифту - 16.

У відносній одиниці em розмір шрифту вимірюється на основі найближчого розміру батьківського шрифту але якщо розмір шрифту не визначений для жодного з батьківських елементів, то за замовчуванням розмір шрифту буде визначений відповідно до кореневого елемента html

Бер відносні одиниці обчислюється тільки кореневий елемент HTML , таким чином, розмір шрифту батьківського елементу не впливає на його

Вимірювальні одиниці CSS: em , rem обидва відносно розміру фронту батьків. Розмір змінюватиметься залежно від розміру шрифту батьків. Приклад:
rem : 100% розміру шрифту Root Element.
em : 100% від розміру батьківського шрифту.