1. px (Pixel): Die gebräuchlichste Einheit, die einen Punkt auf dem Bildschirm darstellt und relativ zur Bildschirmauflösung ist. Auf verschiedenen Geräten kann die Größe eines Pixels unterschiedlich sein. Wenn Sie also px als Einheit verwenden, müssen Sie auf die Bildschirmdichte verschiedener Geräte achten.
2. em: relativ zur Größe der Textschriftart im aktuellen Objekt, also ein Vielfaches der angegebenen Schriftgröße. Wenn die Schriftgröße des aktuellen Elements beispielsweise 16 Pixel beträgt, entspricht 1em 16 Pixel.
3. rem: Die Schriftgröße relativ zum Stammelement HTML, also ein Vielfaches der angegebenen Schriftgröße. Wenn beispielsweise die Schriftgröße des Stammelements 16 Pixel beträgt, entspricht 1rem 16 Pixel, und rem kann die durch verschachtelte Berechnungen in em verursachten Komplikationen vermeiden.
4. % (Prozentsatz): relativ zur Größe des übergeordneten Elements. Wenn beispielsweise die Breite eines Elements auf 50 % festgelegt ist, ist die Breite des Elements relativ zur Breite seines übergeordneten Elements, d. h. Es nimmt 50 % der Breite des übergeordneten Elements ein.
5. vw (Ansichtsfensterbreite): Prozentsatz relativ zur Ansichtsfensterbreite. 1 vw entspricht 1 % der Ansichtsfensterbreite. Wenn die Breite des Ansichtsfensters beispielsweise 1000 Pixel beträgt, entspricht 1vw 10 Pixel.
6. vh (Ansichtsfensterhöhe): Prozentsatz relativ zur Ansichtsfensterhöhe, 1vh entspricht 1 % der Ansichtsfensterhöhe. Wenn die Höhe des Ansichtsfensters beispielsweise 800 Pixel beträgt, entspricht 1vh 8 Pixel.
7. rpx (responsives Pixel): Es handelt sich um eine CSS-Einheit, die in Miniprogrammen verwendet wird und unabhängig von der Pixeldichte des Geräts ist. Bei der Entwicklung kleiner Programme kann rpx als Einheit verwendet werden, um sich an Bildschirme unterschiedlicher Dichte anzupassen. Beispielsweise wird 1rpx automatisch in unterschiedliche Pixelwerte auf Bildschirmen unterschiedlicher Dichte konvertiert.
Kurz gesagt: Durch die Auswahl der geeigneten CSS-Einheit können wir Größe, Position und andere Attribute von Seitenelementen flexibler steuern und so die Reaktionsfähigkeit und Benutzererfahrung der Webseite verbessern.