Zusammenfassung der CSS-Einheiten (wie rem, px, em, vw, vh, vm)

Dieser Artikel bietet Ihnen eine Zusammenfassung der CSS-Einheiten (wie rem, px, em, vw, vh, vm) und stellt die Unterschiede zwischen diesen Einheiten vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

px: Pixel relative Längeneinheit, relativ zur Bildschirmauflösung;

em: em Der Wert ist nicht festgelegt und wird integriert mit der Schriftgröße des übergeordneten Elements;

Hinweis:

1. Wählen Sie body aus und deklarieren Sie Font-size=62.5%; 2. Teilen Sie den ursprünglichen px-Wert durch 10 und ersetzen Sie es dann durch em als Einheit.

　3. Berechnen Sie den em-Wert der vergrößerten Schriftarten neu. Vermeiden Sie wiederholte Angaben zu Schriftgrößen.

Die Standardschriftgröße jedes Browsers beträgt 16 Pixel. Alle nicht angepassten Browser entsprechen 1em=16px, 0,75em=12px und 10px=0,625em. Um die Konvertierung der Schriftgröße zu vereinfachen, müssen Sie im CSS-Body-Selektor Font-size=62,5 % deklarieren, wodurch der Wert von em 16px*62,5%=10px wird, also 12px 1,2em und 10px ist 1em. Das heißt, teilen Sie einfach den ursprünglichen px-Wert durch 10 und ersetzen Sie ihn durch die Einheit von em.

rem

: Relative Einheit (Root em ist rem). Wenn rem als Einheit zum Festlegen der Schriftgröße verwendet wird, ist es relativ zur Größe des HTML-Root-Elements, was möglich ist Die Änderung passt alle Schriftgrößen an. Zum Beispiel:

body{font-size:625%;}

, also 1rem=100px Es ist am besten, es beim gemeinsamen Schreiben von Medienabfragen anzupassen:

　　html{font-size:10px}　　　　　　//10px==62.5%

　　@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}

　　@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}

　　@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}

　　@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}

　　@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}

　　@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}

　　@media screen and (min-width:800px){html{font-size:25px}}

vw

: die maximale Breite des Ansichtsfensters, 1vw=ein Prozent der Breite des Ansichtsfensters; >

vh: Die maximale Höhe des Ansichtsfensters, 1vh = ein Prozent der Höhe des Ansichtsfensters;

vmin/vm: Je nachdem, welcher Wert im Verhältnis zum kleiner ist Breite oder Höhe des Ansichtsfensters. Der kleinste Wert wird in 100 Einheiten vmin (d. h. vm) unterteilt.

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter CSS-Video-Tutorial !

Verwandte Empfehlungen:

PHP-Video-Tutorial zum Gemeinwohltraining

CSS-Online-Handbuch

Div/CSS-Grafik-Tutorial

Das obige ist der detaillierte Inhalt vonZusammenfassung der CSS-Einheiten (wie rem, px, em, vw, vh, vm). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!