|
Die meisten inländischen Designer verwenden gerne PX, während die meisten ausländischen Webseiten EM und REM verwenden – was ist also der Unterschied zwischen den dreien und was sind die Vor- und Nachteile der jeweils anderen? Lassen Sie uns Ihnen eine ausführliche Einführung geben. PX-Funktionen: 1. IE kann die Schriftgröße derjenigen, die px als Einheit verwenden, nicht anpassen; 2. Der Grund, warum die meisten ausländischen Webseiten angepasst werden können, ist, dass sie EM oder rem als Schrifteinheiten verwenden; 3. Firefox kann px, em und rem anpassen, aber mehr als 96 % der chinesischen Internetnutzer nutzen den IE-Browser (oder Kernel). PX Pixel. Relative Längeneinheiten. Pixel px hängt von der Bildschirmauflösung des Monitors ab. (Zitat aus dem CSS2.0-Handbuch) em ist eine relative Längeneinheit. Schriftgröße relativ zum Text innerhalb des aktuellen Objekts. Wenn die Schriftgröße des Textes in der Zeile nicht künstlich eingestellt ist, ist sie relativ zur Standardschriftgröße des Browsers. (Zitat aus dem CSS2.0-Handbuch) Die Standard-Schriftgröße für jeden Browser beträgt 16px. Alle nicht angepassten Browser entsprechen: 1em=16px. Dann 12px=0,75em, 10px=0,625em. Um die Umwandlung der Schriftgröße zu vereinfachen, musst du font-size=62,5% im Body-Selector in CSS deklarieren, wodurch der EM-Wert 16px*62,5%=10px ist, sodass 12px=1,2em, 10px=1em, was bedeutet, dass du nur deinen ursprünglichen px-Wert durch 10 teilen musst und ihn dann durch em als Einheit ersetzen musst. EM-Merkmale: 1. Der Wert von ihnen ist nicht festgelegt; 2. em erbt die Schriftgröße des übergeordneten Elements. Wenn wir also CSS schreiben, müssen wir auf zwei Dinge achten: 1. Deklariere font-size=62,5% im Body-Selector; 2. Teile deinen ursprünglichen px-Wert durch 10 und ersetze ihn durch em als Einheit; 3. Berechnen Sie die EM-Werte dieser vergrößerten Schriftarten neu. Vermeiden Sie wiederholte Angaben zur Schriftgröße. Das heißt, um das Phänomen 1,2 * 1,2 = 1,44 zu vermeiden. Wenn Sie zum Beispiel die Schriftgröße von 1,2em in #content deklarieren, dann kann sie bei der Deklaration der Schriftgröße von p nur 1em sein, nicht 1,2em, weil dieses em nicht das em ist, und es wird 1em=12px, weil es die Schriftgröße von #content erbt. REM-Merkmale rem ist eine neue relative Einheit (Wurzel-em), die zu CSS3 hinzugefügt wurde und viel Aufmerksamkeit erregt hat. Was ist der Unterschied zwischen dieser Einheit und EM? Der Unterschied besteht darin, dass wenn man rem verwendet, um die Schriftgröße eines Elements festzulegen, es immer noch die relative Größe ist, aber das relative Element nur das HTML-Root-Element. Diese Einheit vereint die Vorteile der relativen Größe und der absoluten Größe, wodurch sie nicht nur das Wurzelelement anpassen kann, um alle Schriftgrößen proportional anzupassen, sondern auch die Kettenreaktion der Zusammensetzung von Schriftgrößen Ebene für Schicht vermeiden kann. Derzeit wird rem in allen Browsern außer IE8 und früher unterstützt. Für Browser, die es nicht unterstützen, ist die Antwort ebenfalls sehr einfach: eine absolute Unit-Anweisung zu schreiben. Diese Browser ignorieren die mit rem gesetzte Schriftgröße. Hier ein Beispiel: p {font-size:14px; Schriftgröße: .875rem; } Anmerkung:Die Wahl der Schriftarten liegt größtenteils bei deinem Projekt, und wenn deine Nutzerbasis die neueste Version des Browsers verwendet, wird REM empfohlen; wenn die Kompatibilität ein Problem ist, dann nutze px oder beides. Hier ist eine Adresse des px-, em- und rem-Einheiten-Umwandlungstools:http://pxtoem.com/
| 
Veröffentlicht am 21.03.2017 09:31:50
|
|
|
