Einführung in die Anwendung von Längeneinheiten in CSS

Dieser Artikel bietet Ihnen eine Einführung in die Anwendung von Längeneinheiten in CSS. Ich hoffe, dass er für Freunde hilfreich ist.

Es gibt viele Eigenschaften in CSS, die Längenwerte akzeptieren können, wie zum Beispiel: Breite, Höhe, Rand, Innenabstand, Rahmenbreite, Schriftgröße, Textschatten. Da es viele Verwendungsszenarien gibt, stellt CSS auch viele Längeneinheiten bereit. Einige sind Einheiten, die im täglichen Leben verwendet werden, wie z. B. Zentimeter (cm) und Zoll (Zoll); andere sind Einheiten, die in der Druckindustrie verwendet werden, wie z. B. Punkt (pt) und Pica (pc); andere sind Einheiten, die speziell für CSS erfunden wurden, z als: px .

Nutzungsszenarien

Wie können diese Attribute und Einheiten also zusammen verwendet werden? Erfordern bestimmte Eigenschaften bestimmte Einheiten? Tatsächlich ist dies nicht der Fall. Die Einheit hat nichts mit dem gleichen Attribut zu tun. Es gibt keine Begrenzung, wann welches Attribut einen Wert in px akzeptiert : Rand: 5px), dann kann auch ein Wert in Zoll oder Zentimetern akzeptiert werden (Rand: 1,2 Zoll; Rand: 0,5 cm) und umgekehrt.

Obwohl die Einheit nichts mit Attributen zu tun hat, hat sie eine gewisse Beziehung zum Ausgabemedium, beispielsweise ob die Ausgabe auf dem Bildschirm oder auf Papier erfolgt. Die empfohlenen Einheiten unterscheiden sich bei der Anzeige auf dem Bildschirm und beim Ausdruck auf Papier. Die folgende Tabelle gibt die empfohlene Verwendung an:

输出媒介	推荐	偶尔使用	不推荐
屏幕	em, px, %	ex	pt, cm, mm, in, pc
打印	em, cm, mm, in, pt, pc, %	px, ex

Neben der Beziehung zum Ausgabemedium können diese Einheiten anhand der Berechnungsmethode der Längenwerte in absolute Einheiten und relative Einheiten unterschieden werden.

Absolute Einheiten

Absolute Einheiten (px, cm, mm, in, Q, pt und pc) bedeuten, dass sich der Längenwert in dieser Einheit vom physikalischen unterscheidet Die Länge ist gleich, zum Beispiel entspricht width: 1cm der Länge von 1 cm in der realen Welt, was auch bedeutet, dass der Anzeigeeffekt absoluter Einheiten auf allen Medien konsistent ist. Dies ist jedoch eine ideale Situation. Aufgrund unterschiedlicher Anzeigen und CSS-Implementierungen in verschiedenen Browsern ist die absolute Einheitenanzeige auf vielen Geräten nicht genau. Da die Beziehung zwischen px und in 1in=96px ist, ist 1px auf Geräten mit niedriger Auflösung die Länge von 1 Pixel (Pixel, aus dem auch der Name px stammt), und 1px ist auf Bildschirmen mit niedriger Auflösung oft größer als 1/96 Zoll, also ab px. Keine anderen berechneten absoluten Einheitswerte sind genau. Auf hochauflösenden Geräten (wie den heutigen hochauflösenden Bildschirmen und Druckern) werden absolute Einheiten genauer angezeigt. Aus den oben genannten Gründen werden beim Drucken häufiger absolute Einheiten verwendet.

Es war einmal, dass CSS die korrekte Anzeige absoluter Einheiten auf dem Computerbildschirm erforderte. Da die meisten Hersteller diese Anforderung jedoch nicht umsetzen konnten, verzichtete CSS 2011 auf diese Anforderung. Derzeit funktionieren absolute Einheiten nur auf Druck- und hochauflösenden Geräten ordnungsgemäß. CSS definiert nicht klar, was „hohe Auflösung“ bedeutet. Da Low-End-Drucker jedoch derzeit über 300 dpi Punkte pro Zoll und High-End-Bildschirme über 200 dpi Punkte pro Zoll verfügen, liegt die sogenannte „hohe Auflösung“ wahrscheinlich irgendwo dazwischen. .

Die direkte Umrechnungsformel für absolute Einheiten ist unten aufgeführt:

1in = 2.54cm = 25.4mm = 72pt = 6pc = 96px

px

Da es sich um die am häufigsten verwendete Einheit in CSS handelt, ist es notwendig, ein paar Worte zu px zu sagen . Die Eigenschaften von px lassen sich wie folgt zusammenfassen:

1. Auf Geräten mit niedriger Auflösung ist 1px = 1 Pixel

2. Auf Geräten mit hoher Auflösung , 1px = 1/96 Zoll, 1px entspricht nicht unbedingt 1 Pixel (z. B. 1px = 2 Pixel auf einem 4,7-Zoll-iPhone);

3. Für die Bildanzeige ist 1px = 1 Bildpixel, zum Beispiel: a Die CSS-Breite und -Höhe eines Fotos mit einer Auflösung von 600 x 400 betragen 600 Pixel und 400 Pixel (1200 x 800 Pixel werden für die Anzeige auf einem 4,7-Zoll-iPhone verwendet); >Relative Einheit

Relative Einheiten bedeuten, dass Längenwerte relativ zu anderen Längen berechnet werden. Relative Einheiten können in schriftartbasierte und ansichtsfensterbasierte Einheiten unterteilt werden:

Schriftartbasiert

em, ex

Lassen Sie uns zunächst über em und ex sprechen. em stellt die aktuelle Schriftgröße von dar das Element. Wenn das

des Elements

ist, dann bedeutet

. em kann verwendet werden, um die Größe zu steuern, z. B.

. Zu diesem Zeitpunkt beziehen sich diese Größen auf die Schriftgröße des Elements, sodass sie auf großen Bildschirmen (größere Schriftgröße) und kleinen Bildschirmen (kleiner) gleichermaßen skaliert werden Schriftgröße), also em Kann für responsives Design verwendet werden. Wenn em direkt im font-size-Attribut verwendet wird, z. B. 2cm, wird em als die Größe der Schriftart des übergeordneten Elements ausgedrückt. 1em2cmex wird selten verwendet und die Größe der ex-Darstellung hängt von der x-Höhe der Schriftart ab. x-height entspricht ungefähr der Höhe der Kleinbuchstaben in der Schriftart (z. B. a, c, m oder o). Die x-Höhe verschiedener Schriftarten mit demselben margin: 1em; text-indent:1.5em kann sehr unterschiedlich sein, daher besteht große Unsicherheit hinsichtlich der Auswirkung der Verwendung von ex. font-sizefont-size: 2emrem

CSS hat 2013 eine neue Einheit rem erstellt. rem stellt die Schriftgröße des Stammelements (HTML-Element) dar. Die em können in jedem Element unterschiedlich sein, aber rem sind alle konsistent. Aufgrund dieser Funktion wird rem jetzt häufiger im responsiven Design verwendet. font-size

ch

ch verwendet weniger Tabellen. Es handelt sich um eine neu hinzugefügte Einheit in CSS3 und stellt die Breite von „0“ (Null, Unicode-Zeichen U+0030) in der aktuellen Schriftart dar.

Ansichtsfensterbasiert

vw, wh, vmin, vmax

sind alles neu hinzugefügte Einheiten in CSS3. vw, vh können die Schriftgröße entsprechend der Fenstergröße anpassen. vw ist 1/100 der Breite des Fensters und vh ist 1/100 der Höhe des Fensters. Darüber hinaus gibt es vmin, das sich auf den kleineren Wert zwischen vw und vh bezieht, und das Gegenteil ist vmax. Diese Einheiten werden von den meisten aktuellen Browsern unterstützt.

Das obige ist der detaillierte Inhalt vonEinführung in die Anwendung von Längeneinheiten in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!