Was ist die CSS-Maßeinheit?

CSS-Maßeinheiten werden zur Angabe der Größe, des Abstands, der Ränder und anderer Attribute von Elementen verwendet und können in absolute Einheiten und relative Einheiten unterteilt werden. Absolute Einheiten umfassen Pixel, Zoll, Zentimeter, Millimeter und Punkte. Zu den relativen Einheiten gehören Prozent, Fensterbreite, Fensterhöhe, minimale Fensterbreite, maximale Fensterbreite und relative Schriftarteinheiten. Die Auswahl der geeigneten Maßeinheit kann die Seite anpassungsfähig und reaktionsfähig machen und gleichzeitig die Eigenschaften und Kompatibilität verschiedener Einheiten berücksichtigen.

Das Betriebssystem dieses Tutorials: Windows 10-System, DELL G3-Computer.

Es gibt viele Maßeinheiten in CSS, die zur Angabe der Größe, des Abstands, des Rahmens und anderer Attribute von Elementen verwendet werden. Diese Maßeinheiten können in zwei Kategorien unterteilt werden: absolute Einheiten und relative Einheiten.

1. Absolute Einheit:

- Pixel (Pixel, px): Pixel ist die am häufigsten verwendete absolute Einheit, die einen Punkt auf dem Bildschirm darstellt. Die Pixel sind fest und ändern sich nicht je nach Bildschirmgröße. Breite: 200 Pixel bedeutet beispielsweise, dass die Breite des Elements 200 Pixel beträgt.

- Zoll (Zoll): Zoll ist eine physikalische Einheit, die angibt, dass 1 Zoll 2,54 Zentimeter entspricht. Breite: 2 Zoll bedeutet beispielsweise, dass das Element 2 Zoll breit ist.

- Zentimeter (cm): Zentimeter ist eine physikalische Einheit, die angibt, dass 1 Zentimeter 0,3937 Zoll entspricht. Breite: 5 cm bedeutet beispielsweise, dass die Breite des Elements 5 cm beträgt.

- Millimeter (mm): Millimeter ist eine physikalische Einheit, die angibt, dass 1 Millimeter 0,03937 Zoll entspricht. Breite: 50 mm bedeutet beispielsweise, dass die Breite des Elements 50 mm beträgt.

- Punkt (Punkt, pt): Punkt ist eine physikalische Einheit, die angibt, dass 1 Punkt 1/72 Zoll entspricht. Beispielsweise bedeutet „font-size: 12pt“ eine Schriftgröße von 12 Punkt.

2. Relative Einheit:

– Prozentsatz (%): Der Prozentsatz ist eine Maßeinheit relativ zum übergeordneten Element. Breite: 50 % bedeutet beispielsweise, dass die Breite des Elements 50 % der Breite des übergeordneten Elements beträgt.

- Viewport-Breite (vw): Die Viewport-Breite ist eine Maßeinheit im Verhältnis zur Breite des Browserfensters. Beispielsweise bedeutet width: 50vw, dass die Breite des Elements 50 % der Breite des Browserfensters beträgt.

- Viewport-Höhe (vh): Die Viewport-Höhe ist eine Maßeinheit relativ zur Höhe des Browserfensters. Beispielsweise bedeutet height: 50vh, dass die Höhe des Elements 50 % der Höhe des Browserfensters beträgt.

– Mindestbreite des Ansichtsfensters (vmin): Die Mindestbreite des Ansichtsfensters ist eine Maßeinheit im Verhältnis zur kleineren Breite und Höhe des Browserfensters. Beispielsweise bedeutet width: 50vmin, dass die Breite des Elements 50 % der kleineren Breite und Höhe des Browserfensters beträgt.

- Maximale Breite des Ansichtsfensters (vmax): Die maximale Breite des Ansichtsfensters ist eine Maßeinheit im Verhältnis zur größeren Breite und Höhe des Browserfensters. Breite: 50vmax bedeutet beispielsweise, dass die Breite des Elements 50 % der größeren Breite und Höhe des Browserfensters beträgt.

- Relative Schriftarteinheiten: einschließlich relativer Einheiten wie em, rem und ch, die zur Angabe schriftbezogener Maße verwendet werden. em ist die Schriftgröße relativ zum übergeordneten Element, rem ist die Schriftgröße relativ zum Stammelement (d. h. dem HTML-Element) und ch ist die Breite relativ zu 0 Zeichen.

Die Auswahl der geeigneten Maßeinheit kann dafür sorgen, dass die Seite auf verschiedenen Geräten konsistent erscheint und reagiert. Bei der Auswahl einer Maßeinheit müssen Faktoren wie Größe, Anordnung und verfügbarer Platz der Elemente auf der Grundlage tatsächlicher Bedürfnisse und Designanforderungen berücksichtigt werden. Gleichzeitig müssen Sie auch auf die Eigenschaften und Kompatibilität verschiedener Maßeinheiten achten, um die Konsistenz und Zuverlässigkeit der Stile über verschiedene Browser und Geräte hinweg sicherzustellen.

Zusammenfassend bietet CSS eine Vielzahl von Maßeinheiten, darunter absolute Einheiten (Pixel, Zoll, Zentimeter, Millimeter, Punkte) und relative Einheiten (Prozentsatz, Fensterbreite, Fensterhöhe, minimale Fensterbreite, maximale Fensterbreite, relative Schriftarteinheiten). ). Die Wahl der richtigen Maßeinheit kann die Seite anpassungsfähig und reaktionsfähig machen und gleichzeitig die Eigenschaften und Kompatibilität verschiedener Einheiten berücksichtigen.

Das obige ist der detaillierte Inhalt vonWas ist die CSS-Maßeinheit?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!