CSS-Einheiten – %, em, rem, px, vh, vw

In CSS oder Cascading Style Sheets gibt es viele Einheiten, die die Werte verschiedener Eigenschaften je nach Bedarf auf unterschiedliche Weise darstellen können. CSS-Eigenschaften wie: font-size, height, width und line-height werden verwendet, um verschiedene Eigenschaften des Containers zu definieren. Die Werte dieser Eigenschaften können in unterschiedlichen Einheiten zugeordnet werden.

In diesem Artikel werfen wir einen genaueren Blick auf die verschiedenen CSS-Einheiten und implementieren sie praktisch, um die Verwendung jeder Einheit zu verstehen.

Es gibt viele CSS-Einheiten in CSS, aber in diesem Artikel lernen oder diskutieren wir nur die folgenden Eigenschaften -

• Pixel (px) – Pixel oder px ist die kleinste Einheit und wird hauptsächlich von Anfängern verwendet, um den Wert verschiedener Längeneigenschaften festzulegen. Mathematisch ist 1 Pixel als 1/96 Zoll definiert, d. h. 1 Pixel = 1/96 Zoll.

Grammatik

Die folgende Syntax zeigt Ihnen, wie Sie Pixeleinheiten verwenden, um den Wert verschiedener Längenattribute festzulegen -

property_name: numeric_value px; 

• em – Das em-Attribut wird verwendet, um den Längenattributwert relativ zur Schriftgröße des Elements festzulegen. Wenn wir em mit Pixeln vergleichen, sehen wir, dass 1em dasselbe ist wie 16px, d. h. 1em = 16px.

Grammatik

Die folgende Syntax zeigt Ihnen, wie Sie Pixeleinheiten verwenden, um den Wert verschiedener Längenattribute festzulegen -

property_name: numeric_value em;

• rem – Das rem-Attribut legt den Attributwert relativ zur Schriftgröße des Stammelements in HTML (d. h. des -Tags) fest. Wenn wir rem mit Pixeln vergleichen, dann stellen wir fest, dass 1rem auch dasselbe ist wie 16px, d. h. 1rem = 16px.

Grammatik

Die folgende Syntax zeigt Ihnen, wie Sie den Wert verschiedener Längenattribute mithilfe von Pixeleinheiten festlegen -

property_name: numeric_value rem;

HINWEIS – Es wird empfohlen, bei der Entwicklung von Webseiten oder Anwendungen keine Pixel, em und rem als Einheiten zu verwenden. Denn es ermöglicht Containern in HTML nicht, ihre Breite und Höhe basierend auf der Größe des Ansichtsfensters dynamisch zu ändern und gleichzeitig die Webseite responsiv zu gestalten.

• Viewport-width (vw) – Das viewport-width- oder vw-Attribut wird verwendet, um einen Wert basierend auf der aktuellen Viewport-Breite des Benutzers festzulegen, der die Webseite betrachtet. Dadurch kann der Container seine Breite basierend auf der aktuellen Ansichtsfensterbreite der Webseite dynamisch ändern.

Grammatik

Die folgende Syntax zeigt Ihnen, wie Sie den Wert verschiedener Längenattribute mithilfe von Pixeleinheiten festlegen -

property_name: numeric_value vw;

• Viewport-height (vh) – Die Viewport-Höhe oder vh ist der Eigenschaft Viewport-Breite fast ähnlich. vw wird verwendet, um die dynamische Breite des Elements festzulegen, und vh wird verwendet, um die dynamische Höhe des Elements festzulegen. Jedes Mal, wenn der Benutzer die Höhe ändert, wird die Höhe des Elements dynamisch relativ zur aktuellen Höhe des Ansichtsfensters festgelegt.

Grammatik

Die folgende Syntax zeigt Ihnen, wie Sie Pixeleinheiten verwenden, um den Wert verschiedener Längenattribute festzulegen -

property_name: numeric_value vh;

• Prozent (%) – Das Prozent- oder %-Attribut legt auch einen dynamischen Wert für das Attribut fest, das wir dem Element im HTML-Dokument zuweisen möchten. Anstatt für jede Eigenschaft unterschiedliche %-Zeichen wie vw und vh zu verwenden, können wir für jede Eigenschaft dasselbe %-Zeichen verwenden, um ihr einen Wert zuzuweisen.

Grammatik

Die folgende Syntax zeigt Ihnen, wie Sie Pixeleinheiten verwenden, um den Wert verschiedener Längenattribute festzulegen -

property_name: numeric_value %;

Lassen Sie uns nun jeden von ihnen besprechen und ihre Unterschiede verstehen, indem wir sie mithilfe von Codebeispielen tatsächlich implementieren.

Schritte

• Schritt 1 – Im ersten Schritt definieren wir verschiedene HTML-Elemente, um unterschiedliche Längeneigenschaften mithilfe verschiedener CSS-Einheiten festzulegen.

• Schritt 2 - Im nächsten Schritt definieren wir die Stile der im vorherigen Schritt definierten Elemente innerhalb der

  -Elemente. /head>-Tag.

• Schritt 3 – Im letzten Schritt werden wir verschiedene CSS-Einheiten verwenden, um Eigenschaften Werte zuzuweisen und die Unterschiede zwischen ihnen zu sehen.

Beispiel

Die folgenden Beispiele helfen Ihnen, die Unterschiede zwischen allen CSS-Einheiten zu verstehen und praktisch zu verstehen -

<html>
<head>
   <style>
      .div1 {
         margin-top: 5%;
         width: 50%;
         height: 20%;
         background-color: aqua;
      }
      .div2 {
         margin-top: 5vh;
         width: 50vw;
         height: 20vh;
         background-color: aqua;
      }
      .para1 {
         font-size: 16px;
      }
      .para2 {
         font-size: 1.2em;
      }
      .para3 {
         font-size: 1.3rem;
      }
   </style>
</head>
<body>
   <h2>CSS units – %, em, rem, px, vh, vw</h2>
   <div class = "div1"> width: 50% <br> height: 20% </div>
   <div class = "div2"> width: 50vw <br> height: 20vh </div>
   <p class = "para1"> Paragraph with font-size: 16px </p>
   <p class = "para2"> Paragraph with font-size: 1.2em or 19.2px </p>
   <p class = "para3"> Paragraph with font-size: 1.3rem or 20.8px </p>
</body>
</html>

Im obigen Beispiel haben wir verschiedene CSS-Einheiten verwendet, um die Höhe, Breite und Schriftgröße des Elements anzugeben.

Fazit

In diesem Artikel haben wir etwas über die verschiedenen CSS-Einheiten gelernt, die zum Festlegen des Werts der Längeneigenschaft in CSS verwendet werden können. Wir besprechen sie ausführlich und setzen sie anhand von Codebeispielen praktisch um.

Das obige ist der detaillierte Inhalt vonCSS-Einheiten – %, em, rem, px, vh, vw. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!