Czym różni się rem od em w CSS?

W źródłach internetowych czasami widziałem, jak deweloperzy używają tej remjednostki. Czy jest podobny do em? Próbowałem go zobaczyć, co właściwie robi, ale do czego to się odnosi?

Próbny

HTML

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

CSS

div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}

EMs odnoszą się do rozmiaru czcionki ich rodzica

REMs odnoszą się do podstawowego rozmiaru czcionki

Jest to ważne, gdy kontenery pośrednie zmieniają rozmiary czcionek. Elementy potomne z EM zostaną dotknięte, a te, które używają REM - nie.

Jednostkarem (root em) oznacza rozmiar czcionki elementu głównego. W dokumencie HTML elementem głównym jest htmlelement. Obsługa przeglądarek jest nadal ograniczona.

Podczas gdy em jest względny w stosunku do rozmiaru czcionki swojego bezpośredniego lub najbliższego rodzica, rem jest tylko w odniesieniu do rozmiaru czcionki html (głównej).

em daje możliwość kontrolowania obszaru projektu. Podobnie jak w przypadku, skaluj typ w tym konkretnym obszarze względnie. rem daje możliwość łatwego skalowania tekstu na całej stronie.

Oto przykład. divsdobierane z remzmianą jak zmienić font-sizena htmlelemencie. Podczas gdy te wielkości z emjedyną zmianą jak zmienić font-sizez 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>

Zasadniczo em jest w stosunku do najbliższej jednostki dominującej w CSS, a to rem jest w stosunku do rodzica strony, która jest zwykle tag html ...

Różnicę widać wyraźnie, jeśli uruchomisz poniższy css i jak robi to rodzic:

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>

Podsumowanie:

• rem: CSSjednostka odnosząca się do rozmiaru czcionki htmlelementu.
• em: CSSjednostka odnosząca się do rozmiaru czcionki elementu nadrzędnego .

Przykład:

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

W powyższym przykładzie zielony kwadrat ma wymiary 160 na 160 pikseli (chyba że nie masz domyślnej przeglądarki 16px). To dlatego, że domyślną przeglądarką z htmlelementem font-sizejest 16pxa 10rem* 16px= 160.

Wewnętrzny kwadrat jest 10emduży. Ponieważ jego elementem nadrzędnym jest 5pxkwadrat to 5em * 10px = 50px.

Jak to jest przydatne:

Ustawiając wszystkie jednostki tak, aby remmiały następujące zalety:

• Możemy skalować całą naszą aplikację za pomocą jednego zapytania o media CSS, w tym zapytaniu o media możemy określić rozmiar czcionki. Zmieniając rozmiar czcionki, wszystkie elementy, które mają jednostkę, remzostaną odpowiednio przeskalowane.
• Gdy użytkownicy nie korzystają z domyślnego rozmiaru czcionki przeglądarki, 16pxnasza aplikacja będzie skalować się z wybranym rozmiarem czcionki użytkownika.

rem, em i px to różne jednostki rozmiaru czcionki w css.

em Em jest równy obliczonemu rozmiarowi czcionki rodzica tego elementu. np. element div zdefiniowany z rozmiarem czcionki: 16px, jego dzieci 1em = 16px.

Rem wartości rem są względne w stosunku do głównego elementu html. np .: jeśli rozmiar czcionki elementu głównego to 16 pikseli, 1 rem = 16 pikseli dla wszystkich elementów.

Źródła: https://medium.com/code-better/css-units-for-font-size-px-em-rem-79f7e592bb97

https://stackoverflow.com/a/13941345/9093112 - to najlepsza odpowiedź, ale chcę tylko dodać

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

em i rem są jednostkami względnymi opartymi na czcionkach i różnie jest używać em dla czcionek lub długości, więc zarówno em, jak i rem są oparte na czcionkach, ale różnica między nimi polega na tym, że ems używają elementu nadrzędnego lub bieżącego elementu jako odniesienia, podczas gdy rems użyj rozmiaru czcionki głównej jako odniesienia.

Jeśli chcemy użyć em dla rozmiarów czcionek, odniesieniem jest po prostu obliczony rozmiar czcionki przez rodziców podobny do tego, co dzieje się z procentami.

W poniższym przykładzie rozmiar czcionki trzech em w elemencie potomnym nagłówka daje w wyniku 72 piksele po prostu dlatego, że jest to trzykrotność rozmiaru czcionki nadrzędnej, czyli (150/100) * 16 = 24 piksele. Teraz jest trochę inaczej. Wypełnienie 2em w nagłówku, ponieważ jest to pomiar długości, używa rozmiaru czcionki bieżącego elementu jako odniesienia i wiemy już, że to 24 piksele, więc 2em da w wyniku wypełnienie 48 pikseli, rozumiesz? To subtelna różnica, ale ważna. Kiedy używasz em, jeśli jest to dla czcionek, odniesienie jest elementem nadrzędnym, a dla długości odniesieniem jest bieżący element.

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%;
}

Jeśli chodzi o rem, w rzeczywistości działa w ten sam sposób zarówno dla rozmiarów, jak i długości czcionek, ponieważ zawsze używa jako odniesienia tylko rozmiaru czcionki głównej. Oznacza to, że wypełnienie 10 rem, które mamy tutaj, da 160 pikseli, ponieważ rozmiar czcionki głównej to 16.

W jednostce względnej em rozmiar czcionki jest mierzony na podstawie najbliższego rozmiaru czcionki nadrzędnej, ale jeśli rozmiar czcionki nie jest zdefiniowany dla żadnego z elementów nadrzędnych, wówczas domyślny rozmiar czcionki zostanie zdefiniowany zgodnie z głównym elementem html

Jednostka względna rem jest obliczana tylko przez główny element html , więc rozmiar czcionki elementu nadrzędnego nie ma na nią wpływu

Jednostki miary CSS: em , rem, oba w stosunku do rozmiaru przodu ich rodziców. Rozmiar zmieni się w zależności od rozmiaru czcionki jego Rodzica. Przykład:
rem : 100% rozmiaru czcionki elementu głównego.
em : 100% rozmiaru czcionki nadrzędnej.