Detaillierte Erläuterung der Unterschiede zwischen pt, rpx, px, em, rem, %, vh und vw

Physische Pixel des Geräts

pt: Bildschirmbreite, Auflösung, jeder kleine Teil ist 1pt.

px:

PC-Großbildanzeige, 1 Pixel entspricht ungefähr 0,76 physischen Pixeln
Kleiner Handy-Bildschirm: Unter Verwendung des IPhone6 als Standard beträgt die physische Pixelzahl 750, die Auflösung beträgt 375 1px = 2pt.
px ist auch eine relative Einheit
px wurde entwickelt, um die Größe eines auf dem PC angezeigten Elements und die auf dem Mobiltelefon angezeigte Größe so weit wie möglich auszugleichen.
Die Bildschirme von Mobiltelefonen variieren stark in der Größe, daher möchten wir nicht, dass ein Element auf allen Mobiltelefonen in der gleichen Größe angezeigt wird. Aber ich hoffe, dass ich automatisch proportional skalieren kann. Daher wird px auf der mobilen Seite nicht verwendet.
Normalerweise verwenden Webseiten in PC-seitigen Großbildbrowsern häufiger px-Einheiten.
Es wird selten auf Mobilgeräten verwendet, da die Länge von px relativ fest ist und die Größe nicht adaptiv an Mobilgeräte unterschiedlicher Größe angepasst werden kann.

rem:

Die im Stammelement <html> der Webseite festgelegte Standardschriftgröße ist 1rem. Der Standardwert ist 1rem=16px
Responsives Layout ist umsetzbar.
Responsives Layout bedeutet, dass sich die Größe von Elementen jederzeit entsprechend der Bildschirmgröße ändern kann.
Alle Positionen und Größen in Rem-Einheiten ändern sich mit der Schriftgröße des Stammelements.
Ändern Sie also einfach die Schriftgröße des Stammelements, wenn sich die Bildschirmgröße ändert.

em:

Die Schriftgröße des übergeordneten Elements beträgt 1em, was nicht häufig verwendet wird.
Mehrere Verschachtelungsebenen können zu kumulativen Berechnungen relativ zur Einheit der Schriftgröße des übergeordneten Elements führen.

rpx:
speziell für kleine Programme.

Geht man vom iPhone als Standard aus, betragen die physischen Pixel 750 und die Auflösung 375. Teilen Sie den Bildschirm unabhängig von der Bildschirmgröße in 750 Teile auf. Jeder Teil ist 1 Pixel groß, 1 Pixel = 0,5 Pixel = 1 Punkt
Vorteile: Durch die Einstellung der Größe von Elementen und Schriftarten über rpx kann sich das Miniprogramm automatisch an Bildschirme unterschiedlicher Größe anpassen.

vm/vh:
Neue CSS3-Funktionen.

vh: Egal wie hoch das Ansichtsfenster ist, die Höhe des Ansichtsfensters ist in 100 Teile unterteilt, und jeder kleine Teil beträgt 1 vh. Daher handelt es sich auch um eine relative Einheit, die sich automatisch ändern kann, wenn sich die Größe des Ansichtsfensters ändert.
vw: Egal wie breit das Ansichtsfenster ist, die Breite des Ansichtsfensters ist in 100 Teile unterteilt. Jeder kleine Teil beträgt 1 vw, ist also auch eine relative Einheit und kann sich automatisch ändern, wenn sich die Größe des Ansichtsfensters ändert.
Die Essenz von vw und vh ist %
Der Ansichtsbereich bezieht sich hier auf die Größe des sichtbaren Bereichs innerhalb des Browsers.

Es wird allgemein davon ausgegangen, dass die Prozentsätze der untergeordneten Elemente vollständig relativ zum unmittelbaren übergeordneten Element sind, jedoch nicht immer relativ zum entsprechenden Attributwert des übergeordneten Elements.
Die Ober- und Unterseite des untergeordneten Elements sind, wenn sie als Prozentsatz festgelegt werden, relativ zur Höhe des übergeordneten Elements mit direkter nicht statischer Positionierung (Standardpositionierung).
Wenn die Werte für die linke und rechte Seite des untergeordneten Elements als Prozentsätze festgelegt werden, beziehen sie sich auf die Breite des unmittelbaren, nicht statisch positionierten übergeordneten Elements.
Wenn der Abstand/Rand des untergeordneten Elements als Prozentsatz festgelegt wird, unabhängig davon, ob er vertikal oder horizontal ist, ist er relativ zum Abstand/Rand des direkten übergeordneten Elements und bezieht sich auf die Höhe des übergeordneten Elements.
Da % nicht immer relativ zur Breite, Höhe oder Bildschirmgröße des übergeordneten Elements ist, wird es von Entwicklern selten verwendet.