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.
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!
