So verwenden Sie die neue Längeneinheit in CSS3

Verwendung: 1. em stellt die Schriftgröße relativ zum Text im aktuellen Objekt dar; 3. ch stellt die Größe der Zahl 0 dar; 5. vw stellt die Breite des Ansichtsfensters in Prozent dar. 6. ex stellt die Höhe des Kleinbuchstabens x der aktuellen Schriftart oder 1/2 von 1em dar.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

So verwenden Sie die neuen Längeneinheiten in CSS3

Die neuen Längeneinheiten in CSS3 sind:

• em: die Schriftgröße relativ zum Text im aktuellen Objekt. Schriftgröße relativ zum übergeordneten Knoten

• rem: Schriftgröße relativ zum Stammelement . Anwendungsszenario: Das Layout wird durch den Textinhalt bestimmt.

• vh und vv: 1vh entspricht 1/100 der Ansichtsfensterhöhe ① und 1vw entspricht 1/100 der Ansichtsfensterbreite.

• vmin und vmax: In Bezug auf den minimalen oder maximalen Wert der Höhe und Breite des Ansichtsfensters entspricht vmin dem Mindestwert von 1/100 der Breite und Höhe des Ansichtsfensters. Anwendungsszenario: Ein Element immer auf dem Bildschirm sichtbar machen.

• ch: die Breite der Zahl 0

• ex: die Höhe des Kleinbuchstabens x Buchstaben der aktuellen Schriftart oder 1/2 von 1em②. Anwendungsszenario: Hochgestellt und tiefgestellt

ch – die Breite des Zeichens 0 (Null)

rem – die Schriftgröße des Stammelements (HTML-Element)

Was bedeutet das?

Wenn beispielsweise die Schriftgröße des Stammelement-HTML 100 Pixel beträgt, sind die REM-Einstellungen der Elemente unter dem Stammelement alle 1rem = 100 Pixel.

Der Anfangswert von rem ist 16px, was bedeutet, dass 1rem = 16px ist, wenn die Schriftgröße des Stammknotens nicht festgelegt ist.

Denken Sie daran, dass dies relativ zum Stammelement-HTML ist Funktioniert nicht

Denken Sie daran: vw und vh beziehen sich nur auf den sichtbaren Bereich des Browsers, d sichtbarer Bereich

vh – der visuelle Bereich des Browsers, 1vh entspricht 1 % der Höhe des sichtbaren Bereichs des Browsers

vmin – der kleinere von vw und vh

vmax – der größere von vw und vh

B. die Breiten-/Höheneinstellungen des Browsers für 1000 Pixel/600 Pixel

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die neue Längeneinheit in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!