Detaillierte Erl?uterung von CSS -Schriftgr??eneinheiten: PX, EM, REM, %, VW/VH und andere

cs In diesem Artikel werden diese Einheiten eingehend untersucht, einschlie?lich Pixel (PX), EM -Einheiten (EM), REM -Einheiten (REM), Prozentsatz (%) und Ansichtsfenster (VW, VH, VMIN, VMAX) usw. und analysieren Sie ihre Antwortformeln.

pixel (px)

Pixel sind Einheiten mit fester Gr??e, die sich normalerweise auf einzelne Punkte auf dem Bildschirm beziehen. Aufgrund unterschiedlicher Ger?tepixeldichte kann jedoch der Anzeigeeffekt von PX -Einheiten auf verschiedene Ger?te inkonsistent sein. CSS -Pixel berechnen die Gr??en durch Referenzpixel, um dieses Problem zu vermeiden. Das Referenzpixel ist definiert als der Betrachtungswinkel eines einzelnen Pixels, wenn der Leser ein Arm (etwa 28 Zoll) vom Bildschirm auf einem Ger?t mit einer Pixeldichte von 96DPI entfernt ist. Dies macht die Gr??e eines Pixels ungef?hr 0,26 mm.

Die Verwendung von Pixeln zum Festlegen von Schriftgr??en ist schwer zu pflegen und unfreundlich. Das ?ndern der Schrift aller Elemente in einer gro?en Website ist ein Albtraum. Darüber hinaus k?nnen Benutzer die Schriftgr??e der Pixeleinheiten nicht über die Einstellungen der Browser -Schriftgr??e einstellen.

EM -Einheit (em)

EM -Einheiten k?nnen die überschreibung von Benutzerpr?ferenzen vermeiden. Der Wert von 1EM h?ngt von der Standard -Schriftgr??e des Browsers (normalerweise 16px) ab. Der EM -Wert eines Elements wird durch die berechnete Schriftgr??e bestimmt, die es erbt. Wenn beispielsweise ein Element eine Schriftgr??e von 25px erbt, wird das 2EM dieses Elements als 50px berechnet.

EM -Einheiten eignen sich besonders für die Festlegung der Schriftgr??e der zugeh?rigen Elemente in unabh?ngigen Teilen der Website, wie z. B. Elemente in unabh?ngigen Modulen.

REM -Einheit (REM)

REM -Einheit l?st das Problem der Schriftgr??e der EM -Einheit. Der Wert von 1REM entspricht immer der Schriftgr??e des Wurzelelements und vereinfacht die Berechnung.

REM -Einheiten k?nnen verwendet werden, um die Schriftgr??en des übergeordneten Containers verschiedener unabh?ngiger Module festzulegen, so dass die Schriftgr??en aller Elemente im Modul auf ihren übergeordneten Elementen basieren und gleichzeitig von anderen Modulen unabh?ngig sind.

Prozent (%)

Prozentsatz ?hnelt EM -Einheiten und wird h?ufig verwendet, um die Schriftgr??e des Stammelements in einem reaktionsschnellen Webdesign festzulegen, um die Berechnungen zu vereinfachen.

Ansichtsfenster (VW, VH, VMIN, VMAX)

Ansichtsfenster -Einheiten erm?glichen die Festlegung der Schriftgr??e verschiedener Elemente gem?? der Ansichtsfenstergr??e. Dadurch müssen verschiedene Schriftstellungswerte an mehreren Haltepunkten festgelegt werden. Zum Beispiel entspricht 1 VW 1% der Ansichtsfensterbreite.

Der Nachteil von Ansichtsfenstereinheiten besteht darin, dass die berechnete Schriftgr??e in sehr kleinen oder sehr gro?en Ansichtsfenster -Gr??en das Lesen erschweren kann. Die L?sung besteht darin, Ansichtsfenster in Kombination mit anderen Einheiten zu verwenden.

Andere absolute Einheiten

cs

Schriftgr??e mit Schlüsselw?rtern

Die Schriftgr??e kann mit Schlüsselw?rtern eingestellt werden, einschlie?lich absoluter Schlüsselw?rter (z. B. xx-small, x-small, klein, mittel, gro?, x-large und xx-large) und relative Schlüsselw?rter (gr??er und kleiner).

Browser -Unterstützung

Stellen Sie vor der Verwendung dieser Einheiten in einer Produktionsumgebung sicher, dass der Zielbrowser eine gute Unterstützung dafür hat. Einheiten wie PX, EM werden in allen Mainstream -Browsern unterstützt, w?hrend REM- und Ansichtsfenstereinheiten in ?lteren Browsern schlecht unterstützt werden k?nnen.

Schlussfolgerung

absolute Einheiten sollten so weit wie m?glich vermieden werden, aber relative Einheiten sollten verwendet werden. Die EM -Einheit eignet sich zum Festlegen der Schriftgr??e von untergeordneten Elementen in einem Modul. Die REM -Einheit ist zum Festlegen der Schriftgr??e unabh?ngiger Elemente wie dem Stammelement -Element in einem Modul geeignet. Ansichtsfenster k?nnen in Verbindung mit anderen Einheiten verwendet werden, um sicherzustellen, dass das Layout für ?nderungen der Ansichtsfensterbreite oder -h?he gut angepasst ist.

Dieser Artikel wurde von Tom Hodgins überprüft. Vielen Dank an alle Peer -Rezensenten bei SitePoint für die Erh?hung der Inhalte von SitePoint -Inhalten!

Das obige ist der detaillierte Inhalt vonEine Vorgehensweise von CSS -L?ngeneinheiten, die Sie für die Schriftgr??e verwenden k?nnen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!