Leitfaden zu CSS-Einheitseigenschaften: em, rem, px und vw/vh

Leitfaden für CSS-Einheitsattribute: em, rem, px und vw/vh

Beim Schreiben von CSS-Stilen ist es sehr wichtig, das geeignete Einheitenattribut auszuwählen. In diesem Artikel werden einige häufig verwendete Einheitenattribute vorgestellt: em, rem, px und vw/vh, und es werden spezifische Codebeispiele bereitgestellt.

1. em
   em (Schriftgrößeneinheit) ist die Einheit relativ zur Schriftgröße des übergeordneten Elements. Wenn die Schriftgröße des übergeordneten Elements 16 Pixel beträgt, entspricht 1em 16 Pixel. Wenn em für andere Attribute (wie Breite, Höhe usw.) verwendet wird, ist es ebenfalls ein proportionaler Wert relativ zur Schriftgröße des übergeordneten Elements.

Codebeispiel:

.parent {
  font-size: 16px;
}

.child {
  font-size: 1em; /* 等同于16px */
  width: 2em; /* 等同于32px */
  height: 3em; /* 等同于48px */
}

2. rem
   rem (Schriftgrößeneinheit des Stammelements) ist eine Einheit relativ zur Schriftgröße des Stammelements (normalerweise ein HTML-Element). Im Gegensatz zu em ist die Basis von rem die Schriftgröße des Stammelements. Wenn die Schriftgröße des Stammelements 16 Pixel beträgt, entspricht 1rem 16 Pixel. rem eignet sich für den Layoutteil und kann den Anteil der gesamten Seite problemlos anpassen.

Codebeispiel:

html {
  font-size: 16px;
}

.child {
  font-size: 1rem; /* 等同于16px */
  width: 2rem; /* 等同于32px */
  height: 3rem; /* 等同于48px */
}

3. px
   px (Pixeleinheit) ist die gebräuchlichste Einheit und hat eine feste Länge. px eignet sich für Situationen, in denen eine präzise Kontrolle der Größe erforderlich ist.

Codebeispiel:

.child {
  font-size: 16px;
  width: 32px;
  height: 48px;
}

4. vw/vh
   vw (Ansichtsfenster-Breiteneinheit) und vh (Ansichtsfenster-Höheneinheit) sind Einheiten relativ zur Ansichtsfensterbreite und -höhe. Viewport bezieht sich auf die Breite und Höhe des sichtbaren Bereichs des Browsers. vw stellt den Prozentsatz der Ansichtsfensterbreite dar und vh stellt den Prozentsatz der Ansichtsfensterhöhe dar. Verwenden Sie vw/vh-Einheiten, um die Größe von Elementen basierend auf der Größe des Browserfensters automatisch zu ändern.

Codebeispiel:

.child {
  font-size: 5vw; /* 视口宽度的5% */
  width: 30vw; /* 视口宽度的30% */
  height: 40vh; /* 视口高度的40% */
}

Zusammenfassung:
Die Auswahl geeigneter Einheitenattribute ist sehr wichtig, um CSS-Stile zu schreiben, die flexibel und an verschiedene Bildschirme anpassbar sind. em und rem eignen sich für relative Größen, px eignet sich für feste Größen und vw/vh eignet sich für adaptive Größen. Durch Auswahl geeigneter Einheitenattribute entsprechend der jeweiligen Situation kann die Anzeige der Webseite auf verschiedenen Geräten und Bildschirmen verbessert werden.

Das Obige ist ein Leitfaden zu den Eigenschaften von CSS-Einheiten. Ich hoffe, er wird Ihnen hilfreich sein.

Das obige ist der detaillierte Inhalt vonLeitfaden zu CSS-Einheitseigenschaften: em, rem, px und vw/vh. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!