Wie unterscheidet sich rem von em in CSS?

In der Website-Quelle habe ich manchmal Entwickler gesehen, die das remGerät verwenden. Ist es ähnlich em? Ich habe es versucht, um zu sehen, was es tatsächlich tut, aber womit ist es relativ?

Demo

HTML

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

CSS

div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}

EMs sind relativ zur Schriftgröße ihrer Eltern

REMs sind relativ zu einer Basisschriftgröße

Dies ist wichtig, wenn Zwischencontainer die Schriftgröße ändern. Untergeordnete Elemente mit EMs sind betroffen, diejenigen, die REMs verwenden, nicht.

Die Einheitrem (root em) steht für die Schriftgröße des root-Elements. In einem HTML-Dokument ist das Stammelement das htmlElement. Die Browserunterstützung ist immer noch begrenzt.

Während em relativ zur Schriftgröße des direkten oder nächsten übergeordneten Elements ist , ist rem nur relativ zur HTML-Schriftgröße (root).

em bietet die Möglichkeit, einen Bereich eines Designs zu steuern. Skalieren Sie wie in den Typ in diesem bestimmten Bereich relativ. rem bietet die Möglichkeit, den Typ einfach über die gesamte Seite zu skalieren.

Hier ist ein Beispiel. divsGröße mit remÄnderung, wenn wir font-sizedas htmlElement ändern . Während der mit Größe emnur ändern , wie wir das ändern font-sizeder 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>

Grundsätzlich ist em relativ zum nächsten übergeordneten Element in CSS, während rem relativ zum übergeordneten Element der Seite ist, bei der es sich normalerweise um das HTML-Tag handelt ...

Sie sehen den Unterschied deutlich, wenn Sie das folgende CSS ausführen und wie das übergeordnete Element es bewirkt:

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>

Zusammenfassung:

• rem: Eine CSSEinheit, die relativ zur Schriftgröße des htmlElements ist.
• em: Eine CSSEinheit, die relativ zur Schriftgröße des übergeordneten Elements ist.

Beispiel:

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

Im obigen Beispiel ist das grüne Quadrat 160 x 160 Pixel groß (es sei denn, Sie haben keine Standardeinstellung für den Browser 16px). Dies liegt daran , dass die Standard - Browser des htmlElements font-sizeist 16pxund 10rem* 16px= 160.

Das innere Quadrat ist 10emgroß. Da das übergeordnete Element 5pxdas Quadrat ist, ist es 5em * 10px = 50px.

Wie ist das nützlich:

Durch Einstellen aller Einheiten auf remdie folgenden Vorteile:

• Wir können unsere gesamte Anwendung mit einer CSS-Medienabfrage skalieren. In dieser Medienabfrage können wir die Schriftgröße angeben. Durch Ändern der Schriftgröße werden alle Elemente mit dem Gerät rementsprechend skaliert.
• Wenn Benutzer nicht die Standardschriftgröße des Browsers verwenden, wird die Schriftgröße 16pxunserer Anwendung mit der ausgewählten Schriftgröße des Benutzers skaliert.

rem, em und px sind unterschiedliche Einheiten der Schriftgröße in CSS.

em Ein em entspricht der berechneten Schriftgröße des übergeordneten Elements dieses Elements. Beispiel: div Element definiert mit Schriftgröße: 16px, seine untergeordneten Elemente 1em = 16px.

rem rem-Werte beziehen sich auf das HTML-Stammelement. Beispiel: Wenn die Schriftgröße des Stammelements 16 Pixel beträgt, ist 1 rem = 16 Pixel für alle Elemente.

Referenz: https://medium.com/code-better/css-units-for-font-size-px-em-rem-79f7e592bb97

https://stackoverflow.com/a/13941345/9093112 - es ist die beste Antwort, aber ich möchte nur hinzufügen

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

em und rem sind auf Schriftarten basierende relative Einheiten und es ist unterschiedlich, ems für Schriftarten oder für die Länge zu verwenden, sodass sowohl ems als auch rems auf Schriftarten basieren. Der Unterschied zwischen ihnen besteht jedoch darin, dass ems das übergeordnete oder das aktuelle Element als Referenz für rems verwenden Verwenden Sie die Root-Schriftgröße als Referenz.

Wenn wir ems für Schriftgrößen verwenden möchten, ist die Referenz einfach die von den Eltern berechnete Schriftgröße, ähnlich wie bei Prozentsätzen.

Im folgenden Beispiel ergibt eine Schriftgröße von drei Em im untergeordneten Header-Element 72 Pixel, einfach weil dies die dreifache übergeordnete Schriftgröße ist (150/100) * 16 = 24px. Nun zur Länge, es ist nur ein bisschen anders. Das 2em-Auffüllen in der Kopfzeile verwendet, da es sich um eine Längenmessung handelt, die Schriftgröße des aktuellen Elements als Referenz und wir wissen bereits, dass dies 24 Pixel sind. 2em führt also zu einem 48-Pixel-Auffüllen, verstanden? Es ist ein subtiler Unterschied, aber ein wichtiger. Wenn Sie em für Schriftarten verwenden, ist die Referenz das übergeordnete Element und für die Länge die Referenz das aktuelle 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%;
}

In Bezug auf den Rem funktioniert es sowohl für Schriftgrößen als auch für Schriftlängen auf die gleiche Weise, da immer nur die Root-Schriftgröße als Referenz verwendet wird. Dies bedeutet, dass das 10-Rem-Padding, das wir hier haben, 160 Pixel ergibt, da die Root-Schriftgröße 16 beträgt.

In em relativen Einheit ist die Schriftgröße auf der Basis der gemessenen nächsten Mutterschriftgröße , aber wenn die Schriftgröße für keine der übergeordneten Elemente dann durch Standard - Schriftgröße wird definiert entsprechend der definiert ist root HTML - Element

Die rem relative Einheit wird nur vom Root-HTML-Element berechnet , daher hat die Schriftgröße des übergeordneten Elements keinen Einfluss darauf