Zu den relativen Einheiten in CSS gehören Prozent, Fenstereinheit, relative Schriftarteinheit und relative Längeneinheit usw. Detaillierte Einführung: 1. Prozent ist eine Maßeinheit relativ zum übergeordneten Element. In CSS können Sie den Prozentsatz verwenden, um die Größe, den Rand, den Abstand und andere Attribute des Elements anzugeben. Die Prozenteinheit wird sehr häufig verwendet und kann angepasst werden adaptiv entsprechend der Größe des übergeordneten Elements 2. Die Fenstereinheit ist eine Maßeinheit relativ zum Browser-Ansichtsfenster, und die Fenstereinheit kann die Größe des Elements entsprechend der Größe des Browsers anpassen 3. Die relative Schriftarteinheit ist eine Einheit relativ zur Schriftgröße usw.
Das Betriebssystem dieses Tutorials: Windows 10-System, DELL G3-Computer.
In CSS sind relative Einheiten Einheiten relativ zu anderen Dimensionen oder der Umgebung, und ihre Werte ändern sich je nach Kontext. Relative Einheiten ermöglichen ein responsives Layout und passen sich an unterschiedliche Bildschirmgrößen an. Die folgenden relativen Einheiten sind in CSS üblich:
1. Prozentsatz (%): Der Prozentsatz ist eine Maßeinheit relativ zum übergeordneten Element. In CSS können Sie Prozentsätze verwenden, um die Größe, Ränder, Abstände und andere Eigenschaften von Elementen anzugeben. Breite: 50 % bedeutet beispielsweise, dass die Breite des Elements 50 % der Breite des übergeordneten Elements beträgt. Die Prozenteinheit wird sehr häufig verwendet, um die Größe eines Elements basierend auf der Größe seines übergeordneten Elements adaptiv zu ändern.
2. Viewport-Einheiten: Viewport-Einheiten sind Maßeinheiten relativ zum Browser-Viewport. Ansichtsfenstereinheiten ändern die Größe von Elementen basierend auf der Größe des Browserfensters. Gängige Fenstereinheiten sind:
– Ansichtsfensterbreite (vw): Die Fensterbreiteneinheit stellt einen Prozentsatz relativ zur Breite des Browserfensters dar. Beispielsweise bedeutet width: 50vw, dass die Breite des Elements 50 % der Breite des Browserfensters beträgt. Ansichtsfenster-Breiteneinheiten eignen sich hervorragend zum Erstellen responsiver Layouts, die die Breite von Elementen automatisch an die Größe des Browserfensters anpassen.
- Viewport Height (vh): Die Fensterhöheneinheit stellt einen Prozentsatz relativ zur Höhe des Browserfensters dar. Beispielsweise bedeutet height: 50vh, dass die Höhe des Elements 50 % der Höhe des Browserfensters beträgt. Höheneinheiten für Ansichtsfenster werden häufig auch verwendet, um responsive Layouts zu erstellen, die die Höhe von Elementen automatisch an die Größe des Browserfensters anpassen.
- Mindestbreite des Ansichtsfensters (vmin): Die minimale Breiteneinheit des Ansichtsfensters stellt den Prozentsatz im Verhältnis zur kleineren Breite und Höhe des Browserfensters dar. Beispielsweise bedeutet width: 50vmin, dass die Breite des Elements 50 % der kleineren Breite und Höhe des Browserfensters beträgt. Die Mindestbreiteneinheit des Ansichtsfensters stellt sicher, dass Elemente über verschiedene Bildschirmgrößen hinweg die richtigen Proportionen beibehalten.
- Maximale Breite des Ansichtsfensters (vmax): Die maximale Breiteneinheit des Ansichtsfensters stellt einen Prozentsatz im Verhältnis zur größeren Breite und Höhe des Browserfensters dar. Breite: 50vmax bedeutet beispielsweise, dass die Breite des Elements 50 % der größeren Breite und Höhe des Browserfensters beträgt. Die maximale Breiteneinheit des Ansichtsfensters stellt sicher, dass Elemente über verschiedene Bildschirmgrößen hinweg die richtigen Proportionen beibehalten.
3. Relative Schriftarteinheiten: Relative Schriftarteinheiten sind Einheiten relativ zur Schriftgröße. Gängige relative Schriftarteinheiten sind:
- em: Die em-Einheit ist ein Vielfaches der Schriftgröße relativ zum Element. Beispielsweise bedeutet „font-size: 1.2em“, dass die Schriftgröße das 1,2-fache der Schriftgröße des übergeordneten Elements beträgt. Mit der Einheit em können Größe, Abstand, Ränder und andere Attribute von Elementen angegeben werden.
- rem: Die rem-Einheit ist ein Vielfaches der Schriftgröße relativ zum Stammelement (d. h. dem HTML-Element). Beispielsweise bedeutet „font-size: 1.5rem“, dass die Schriftgröße das 1,5-fache der Schriftgröße des Stammelements beträgt. rem-Einheiten können verwendet werden, um reaktionsfähige Schriftgrößen auf der gesamten Seite zu implementieren.
4. Relative Längeneinheiten: Relative Längeneinheiten sind Einheiten relativ zu einem bestimmten Attributwert des Elements selbst. Gängige relative Längeneinheiten sind:
- rem: Die rem-Einheit ist ein Vielfaches der Schriftgröße relativ zum Stammelement (d. h. dem HTML-Element). In CSS können Sie rem-Einheiten verwenden, um die Größe, den Abstand, die Ränder und andere Attribute von Elementen anzugeben. Die rem-Einheit wird häufig verwendet, um relative Abmessungen der gesamten Seite zu implementieren.
- em: Die em-Einheit ist ein Vielfaches der Schriftgröße relativ zum Element. In CSS können Sie em-Einheiten verwenden, um die Größe, den Abstand, die Ränder und andere Attribute von Elementen anzugeben. Die Em-Einheit kann die Größe eines Elements basierend auf seiner eigenen Schriftgröße anpassen.
Diese relativen Einheiten können sich je nach Kontextänderungen ändern, wodurch die Seite auf verschiedenen Geräten und Bildschirmgrößen anpassbar und reaktionsfähig ist. Die Verwendung relativer Einheiten kann dazu beitragen, ein flexibles Layout und ein adaptives Design zu erreichen.
Zusammenfassend lässt sich sagen, dass zu den gängigen relativen Einheiten in CSS Prozentsätze, Fenstereinheiten (vw, vh, vmin, vmax), relative Schriftarteinheiten (em, rem) und relative Längeneinheiten (rem, em) gehören. Diese Einheiten können sich je nach Kontext ändern und dabei helfen, responsive Layouts zu implementieren und sich an unterschiedliche Bildschirmgrößen anzupassen. Bei der Auswahl der Einheiten müssen Sie basierend auf Ihren spezifischen Designanforderungen und -bedürfnissen entscheiden, welche relativen Einheiten Sie verwenden möchten.
Das obige ist der detaillierte Inhalt vonWas sind die relativen Einheiten in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
