Eine Vorgehensweise von CSS -Längeneinheiten, die Sie für die Schriftgröße verwenden können

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

festlegen

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!