Verstehen Sie die Unterschiede zwischen px, em und rem sowie deren Vor- und Nachteile genau

Wenn wir die Seite gestalten, müssen wir oft die Länge, Breite und Höhe der Box festlegen. Welche Einheiten werden also für diese Längen, Breiten und Höhen verwendet? Tatsächlich verwenden inländische Designmeister gerne px, während die meisten ausländischen Websites gerne em und rem verwenden. Also Was sind die Unterschiede zwischen px, em und rem und was sind die Vor- und Nachteile davon? jede? Als nächstes werde ich es Ihnen vorstellen. Freunde, die es brauchen, können einen Blick darauf werfen.

px-Funktionen:

1. IE kann die Schriftgröße, die px als Einheit verwendet, nicht anpassen Der Grund dafür ist, dass es em oder rem als Schriftarteinheit verwendet;

3. Firefox kann px und em, rem anpassen, aber mehr als 96 % der chinesischen Internetnutzer verwenden den IE-Browser (oder Kernel).

px Pixel (Pixel). Relative Längeneinheit. Pixel px sind relativ zur Bildschirmauflösung. (Zitiert aus dem CSS2.0-Handbuch)

em ist eine relative Längeneinheit. Die Schriftgröße relativ zum Text im aktuellen Objekt. Wenn die aktuelle Schriftgröße für Inline-Text nicht manuell festgelegt wurde, ist sie relativ zur Standardschriftgröße des Browsers (16 Pixel). (Zitat aus dem CSS2.0-Handbuch)

Die Standardschrifthöhe jedes Browsers beträgt 16 Pixel. Alle unangepassten Browser-Tofu: 1em=16px. Dann 10px=0,625px. Um die Konvertierung der Schriftgröße zu vereinfachen, müssen Sie im Body-Selektor von CSS die Schriftgröße = 62,5 % deklarieren, wodurch der em-Wert 16px * 62,5 % = 10px wird, also 10px = 1em , Sie müssen nur das Original ändern. Teilen Sie einfach den px-Wert durch 10 und ersetzen Sie ihn dann durch em als Einheit.

em Funktionen:

1.em Der Wert ist nicht festgelegt.

2.em erbt die Schriftgröße des übergeordneten Elements.

Wenn wir also CSS schreiben und im Body-Selektor „font-size=62.5%“ deklarieren, teilen wir den ursprünglichen px-Wert durch 10 und ersetzen ihn dann durch em als Einheit der Einheitswert, um eine wiederholte Angabe der Schriftgröße zu vermeiden.

Damit soll das Phänomen 1,2*1,2=1,44 vermieden werden. Wenn Sie beispielsweise in #content die Schriftgröße als 1,2em deklarieren, kann die Schriftgröße von p, wenn Sie sie deklarieren, nur 1em und nicht 1,2em sein, da dieses Em nicht dieses Em ist und sehr variabel ist weil es die Schriftgröße von #content erbt. Für 1em=12px.

rem-Funktionen:

rem ist eine neue relative Einheit (root em root em) in CSS3. Diese Einheit hat große Aufmerksamkeit erregt. Was ist der Unterschied zwischen dieser Einheit und ihnen? Der Unterschied besteht darin, dass es sich bei der Verwendung von rem zum Festlegen der Schriftgröße für ein Element immer noch um eine relative Größe handelt, diese jedoch nur relativ zum HTML-Stammelement. Man kann sagen, dass diese Einheit die Vorteile der relativen Größe und der absoluten Größe kombiniert. Dadurch können Sie alle Schriftgrößen proportional anpassen, indem Sie nur das Stammelement ändern, und Sie können die Kettenreaktion der zusammengesetzten Schriftgrößen Schicht für Schicht vermeiden. Derzeit unterstützen alle Browser außer IE8 und früher rem. Für Browser, die dies nicht unterstützen, ist die Lösung sehr einfach: Schreiben einer zusätzlichen absoluten Einheitenanweisung. Diese Browser ignorieren mit rem festgelegte Schriftgrößen. Hier ist ein Beispiel:

p{font-size:14px;font-size:875rem;}

Hinweis:

Welche Schriftarteneinheit verwendet werden soll, hängt hauptsächlich von Ihrem Projekt ab. Wenn Ihre Benutzerbasis alle die neueste Version des Browsers verwendet, wird die Verwendung empfohlen rem, wenn Sie die Kompatibilität berücksichtigen möchten, verwenden Sie px oder verwenden Sie beide gleichzeitig.

Hier stellen wir Ihnen ein Tool zur Konvertierung von px-, em- und rem-Einheiten zur Verfügung. Adresse:

http://pxtoem.com/

Das obige ist der detaillierte Inhalt vonVerstehen Sie die Unterschiede zwischen px, em und rem sowie deren Vor- und Nachteile genau. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!