Em- und Rem-Einheiten in CSS?-CSS-Tutorial-php.cn

Em- und Rem-Einheiten in CSS?

PHPz

Freigeben： 2023-08-27 13:13:10

nach vorne

810 Leute haben es durchsucht

CSS 中的 Em 与 Rem 单位？

Wenn Sie die Größe eines Elements mithilfe von CSS-Eigenschaften festlegen, werden Ihnen möglicherweise zwei Optionen auffallen: eine für absolute Einheiten und die andere für relative Einheiten. Die absoluten Einheiten sind gleich und fest, und Sie können cm, mm und px verwenden, um die Größe festzulegen. Relative Einheiten hingegen sind relativ zu etwas anderem, entweder dem übergeordneten Element oder einem anderen Element.

In diesem Tutorial betrachten wir den Vergleich zwischen em- und rem-Einheiten in CSS.

Die Em-Einheit

Die

em-Einheit ermöglicht es, die Größe eines Elements relativ zur Schriftgröße seines übergeordneten Elements zu ändern. Das heißt, wenn sich die Größe des übergeordneten Elements ändert, ändert sich auch die Größe der untergeordneten Elemente.

Schauen wir uns ein Beispiel an, um zu verstehen, was die Em-Einheit macht.

Beispiel

In diesem Beispiel ändern wir die Schriftgröße des untergeordneten Elements auf 35px. Die Ränder der untergeordneten Elemente werden ebenfalls auf 50px geändert.

Hier haben wir zuerst ein übergeordnetes Element erstellt und dann seine Größe auf 17,5 Pixel und die Schriftgröße des untergeordneten Elements auf 1em festgelegt, was bedeutet, dass die Schriftgröße des untergeordneten Elements doppelt so groß ist wie die des übergeordneten Elements und der Rand des Das Element bleibt unverändert. Werfen wir einen Blick auf die Ausgabe des Codes.

Hinweis - Die Verwendung der Eigenschaft „font-size“ ist relativ zum Vaterelement (übergeordnetes Element), wenn es für andere Eigenschaften verwendet wird.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Difference between em and rem</title>
   <style>
      .father {
         paddding: 0px;
         font-size: 16px;
      }
      .son {
         margin: 1em;
         font-size: 1em;
      }
   </style>
</head>
<body>
   <div class="father">
      This is the Father element
      <div class="son">
         This is Son element
      </div>
   </div>
</body>
</html>

Nach dem Login kopieren

In der obigen Ausgabe gibt es ein übergeordnetes Element und ein untergeordnetes Element. In der Ausgabe haben die untergeordneten Elemente dieselbe Größe wie das übergeordnete Element

Rem-Einheit

Die Einheit rem ist die Schriftgröße relativ zum Stamm des Elements, also des HTML-Elements. Wenn keine Schriftgröße angibt, wird der Standardwert des Browsers verwendet, unabhängig vom übergeordneten Element, nur das Stammelement.

Beispiel

Wir behalten die Schriftgröße des untergeordneten Elements bei 50 Pixel und setzen dann den Rand des Elements auf 40 Pixel. Die Größe der rem-Einheit ist im Gegensatz zu em für alle Deklarationen relativ

Im folgenden Beispiel haben wir zuerst das Stammelement verwendet und dann ein übergeordnetes Element und das untergeordnete Element erstellt. Anschließend haben wir die Schriftgröße des Stammelements auf 18 Pixel und die Schriftgröße des übergeordneten Elements auf 15 Pixel festgelegt Die Schriftart des untergeordneten Elements wurde dann auf 1,5rem gesetzt, was die doppelte Größe des Stammelements und nicht des übergeordneten Elements bedeutet. Schauen wir uns die Ausgabe an, um zu sehen, was die rem-Einheit bewirkt.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>The difference between em and rem units</title>
   <style>
      html {
         font-size: 18px;
      }
      .son {
         font-size: 2rem;
         margin: 1.5rem;
      }
      .father {
         font-size: 13px;
      }
   </style>
</head>
<body>
   <div class="father">
      This is parent
      <div class="son">
         This is Child in rem unit system
      </div>
   </div>
</body>
</html>

Nach dem Login kopieren

In der obigen Ausgabe können Sie sehen, dass das untergeordnete Element nicht das Double des übergeordneten Elements, sondern das Double des Wurzelelements ist.

Die Einheit em ist relativ zur Schriftgröße des nächstgelegenen übergeordneten Elements und kann zum zusammengesetzten Effekt führen. Die rem-Einheit ist relativ zur HTML-Stammschriftgröße, führt jedoch nicht zum zusammengesetzten Effekt.

Em- und Rem-Einheiten in CSS

Zu den Einheiten gehören em, vh, vw und rem. Die relativen Einheiten werden auch als skalierbare Einheiten bezeichnet und spielen eine wichtige Rolle für die Reaktionsfähigkeit der Website. Die em-Einheit ist sowohl skalierbar als auch relativ relativ zur Schriftgröße des übergeordneten Elements im HTML-Dokument und der REM-Einheit, ist relativ zum Schriftstamm des gesamten Dokuments.

Fazit

Der Unterschied zwischen em-Einheiten und rem-Einheiten besteht darin, dass em-Einheiten relativ zum übergeordneten Element berechnet werden, während rem-Einheiten relativ zum -Wurzelelement berechnet werden. Beide Einheiten sind relative Einheiten und tragen dazu bei, dass die Website responsiv gestaltet wird. Mithilfe dieser Einheiten können Sie die Größe bestimmter Elemente festlegen.

Das obige ist der detaillierte Inhalt vonEm- und Rem-Einheiten in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!