Ein Blick auf Längeneinheiten in CSS

detaillierte Erläuterung der CSS -Längeneinheiten: Von absolut zu relativ, dann zu Ansichtsfenster

genaue Messung ist ein entscheidender Bestandteil des Webdesigns. Das Vorhandensein von mindestens zehn Längeneinheiten in CSS reicht aus, um dies zu veranschaulichen. Jedes Gerät hat seinen eigenen Zweck und ermöglicht es der Webseite, sich besser an verschiedene Geräte anzupassen. Sobald Sie diese Einheiten beherrschen, können Sie die Elementgröße genauer anpassen. In diesem Tutorial werden die verschiedenen in CSS verfügbaren Einheiten untersucht und unter den Umständen diskutiert, welche Einheiten verwendet werden und wie sie verwendet werden.

Schlüsselpunkte

• CSS bietet eine Vielzahl von Längeneinheiten, jede Einheit mit spezifischem Zweck und ermöglicht Webseiten, sich besser an verschiedene Geräte anzupassen. Diese Einheiten können grob in Einheiten mit absoluten Längen, relativen Längeneinheiten und Ansichtsfenster relativ Länge unterteilt werden.
• Einheiten der absoluten Länge (wie Pixel, Zoll, Millimeter und Zentimeter) repräsentieren physikalische Messungen und werden nicht durch Bildschirmgröße oder Auflösung beeinflusst. Sie sind jedoch möglicherweise nicht für digitale Geräte oder für Situationen geeignet, in denen die Auflösung unbekannt ist.
• Einheiten der relativen Länge (einschließlich EM-, REM- und Ansichtsfenster -Einheiten) passen ihre Werte anhand anderer vordefinierter Werte oder Eigenschaften an, wodurch sie ideal für die Erstellung reaktionsschneller Layouts. Sie können relativ zur verwendeten Schriftart oder zur Fensterhöhe und Breite des Bildschirms sein.
• Die relative Länge des Ansichtsfensters basiert auf der Höhe und Breite des Ansichtsfensters. Diese Einheiten (einschließlich VH (Ansichtsmittelhöhe), VW (Ansichtsfenster), VMin (Ansichtsfenster -Minimum) und VMAX (Maximum)) können verwendet werden, um Elemente basierend auf der Größe des Browserfensters zu skalieren.

Absolute Längeneinheit

absolute Einheiten sind numerische Darstellungen tatsächlicher physikalischer Messungen. Diese Einheiten haben nichts mit der Bildschirmgröße oder ihrer Auflösung zu tun. Daher sind Einheiten für absolute Länge nicht für die Verwendung auf digitalen Geräten oder wenn die Auflösung nicht bekannt ist. Diese Einheiten sind besser geeignet, wenn Sie für physikalische Medien wie den Druck entwerfen.

Absolute Einheiten umfassen:

• cm (cm)
• mm (mm)
• in (Zoll)
• PC (Kartenbuchung)
• pt (lb)
• px (pixel)

Beachten Sie, dass der Bearbeitungsentwurf der Spezifikation auch Viertel Millimeter -Einheiten (Q) enthält. Dies ist jedoch eine neue Einheit, die keinen Browser zu unterstützen scheint.

Sie können feststellen, dass bei Verwendung der absoluten Länge der gleiche Wert derselben Einheit auf verschiedenen Bildschirmen einen anderen Display -Effekt hat. Dies liegt daran, dass der DPI des Bildschirms (Punkte pro Zoll) unterschiedlich ist. Hochauflösende Bildschirme haben höhere DPI als Bildschirme mit niedriger Auflösung, sodass Bilder oder Text kleiner aussehen.

Die am häufigsten verwendeten Pixel aller absoluten Einheiten sind Pixel (PX). Pixel werden oft als einzelne Punkte auf dem Bildschirm verstanden, obwohl es technisch komplexer ist. Es ist die kleinste Messeinheit und wird normalerweise als Benchmark für andere Einheiten verwendet.

Andere Einheiten (z. B. Zoll, Millimeter und Zentimeter) repräsentieren die physische Größe dieser Einheiten. Pfund (PT) Einheiten repräsentieren 1/72 Zoll und Karten (PC) -Initen 1/6 Zoll. Hier sind einige CSS -Codes, die sechs gemeinsame Absoluteinheiten verwenden:

p {
  border-top: 0.5in solid blue;
  border-bottom: 18mm solid green;
  border-left: 1cm solid red;
  border-right: 40px solid black;
  letter-spacing: 0.4pc;
  font-size: 20pt;
}

codepen Demo

relative Längeneinheiten

Wie der Name schon sagt, gibt es für relative Einheiten keinen festen Wert. Ihre Werte sind relativ zu einigen anderen vordefinierten Werten oder Eigenschaften. Relative Einheiten erleichtern es einfach, die Elementgröße leicht anzupassen, da wir ihre Breite, Höhe, Schriftgröße usw. mit einigen anderen Benchmark -Parametern in Verbindung bringen können.

Beim Erstellen von Reaktionslayouts werden diese Einheiten normalerweise empfohlen und eignen sich besser für digitale Medien. Ihre Werte können relativ zur Schriftart oder zur Fensterhöhe und Breite des Bildschirms sein.

relative Einheiten umfassen:

• ex (x Höhe)
• ch (Zeichen)
• em (benannt nach dem Drucken, aber nicht dasselbe)
• rem (root em)

Schauen wir uns diese Einheiten genauer an.

x Höhe (Ex) und Zeichen (CH) Einheiten

Ex -Einheiten werden in der Entwicklung selten eingesetzt. 1ex entspricht der Größe des unteren Falles "x" der verwendeten Schriftart. In den meisten Fällen beträgt der Wert von 1 EX fast 0,5EM. Dies wird jedoch je nach Schriftart variieren. Diese Einheit kann als vertikale äquivalente Einheit von EM angesehen werden.

p {
  font-size: 2ex;
}

Zeichen (CH) Das Gerät hängt mit dem "0" -Scharakter zusammen. 1Ch ist das Fortschrittsmaß des "0" -Zeichens in der Schriftart.

p {
  margin: 2ch;
}

EM Einheit

Der Wert der Einheit entspricht der Schriftgröße des Grundelements oder des übergeordneten Elements. Wenn das übergeordnete Element beispielsweise eine Schriftgröße von 20px hat, wird der Wert von 1EM für alle direkten Kinder als 20px berechnet. Die Schriftgröße von Kinderelementen kann nach Basiseinheiten leicht erhöht oder verringert werden. Die Zahl muss keine Ganzzahl sein.

Mit EM können wir die Schriftgrößen verschiedener Elemente in festen Maßstäben problemlos aufbewahren. Wenn beispielsweise der Wert der Schriftgröße des übergeordneten Elements 50px beträgt, entspricht die Festlegung der Schriftgröße des untergeordneten Elements auf 2EM mit der Einstellung von 100px. In ähnlicher Weise wird die Schriftgröße des untergeordneten Elements 25px auf 0,5EM festgelegt.

Die folgende Demonstration zeigt ein einfaches Beispiel dafür, wie die EM -Einheit funktioniert:

codepen Demo

manchmal erzeugen Em -Einheiten jedoch bei verschachtelten Elementen unerwünschte Ergebnisse. Dies liegt daran, dass der EM -Wert einen von einem Elternteil direkt gekennzeichneten Wert nimmt. Daher hat jedes verschachtelte untergeordnete Element denselben EM -Wert, der berechnete Wert ist jedoch unterschiedlich, da der berechnete Wert immer relativ zu seinem direkten Elternteil ist. Wenn wir also den Wert des aktuellen Elements auf den Anteil des übergeordneten Elements relativ zum nicht gerichteten übergeordneten Element oder dem nicht-Root-übergeordneten Element festlegen müssen, macht es es schwierig.

Folgendes ist eine Demonstration, die den Ausnahme -Nesting -Effekt von EM -Einheiten zeigt. In diesem Beispiel gehen wir davon aus, dass die Benchmark -Schriftgröße im Dokument 16px beträgt (dies ist normalerweise der Standard):

codepen Demo

Bitte beachten Sie die verschachtelten Elemente in HTML, der Inhalt jedes Elements deklariert die berechnete Schriftgröße.

Folgendes ist das CSS für dieses Beispiel:

p {
  border-top: 0.5in solid blue;
  border-bottom: 18mm solid green;
  border-left: 1cm solid red;
  border-right: 40px solid black;
  letter-spacing: 0.4pc;
  font-size: 20pt;
}

Sie können sehen, dass, obwohl alle Div -Elemente als 1.15EM definiert sind, ihre tatsächlichen Schriftgrößen unterschiedlich sind, weil sie verschachtelt sind.

REM -Einheit

Hier ist die REM -Einheit nützlich. Der Wert von REM entspricht immer der Schriftgröße des Stammelements (HTML -Element in HTML -Dokumenten). REM -Demos ähneln denen von EM -Einheiten. Hier ist CSS:

p {
  font-size: 2ex;
}

Dies ist eine einfache Demo mit der gleichen Verhinderung wie die vorherige Demo, aber diesmal mit REM:

codepen Demo

Beachten Sie, dass die Verschachtelung jetzt noch existiert, jedoch die berechnete Schriftgröße verschachtelter Elemente nicht beeinflusst.

Ansichtsfenster relative Länge Einheit

Die relative Länge des Ansichtsfensters basiert auf der Höhe und Breite des Ansichtsfensters. Ein Fenster oder Ansichtsfenster ist ein Bereich oder einen Rahmenraum, der auf dem Bildschirm sichtbar ist.

Relativeinheiten für Ansichtsfenster enthalten:

• vh (Ansichtsfenster)
• vw (Ansichtsfenster)
• vmin (Ansichtsfenster -Mindestwert)
• vmax (Maximalwert des Ansichtsfenstes)

Ansichtsfenster (VH) und Ansichtsfenster (VW)

VH -Einheiten korrelieren stark mit dem Ansichtsfenster. Der Wert von VH entspricht 1/100 der Ansichtsfensterhöhe. Diese Einheit ist nützlich, wenn wir Elemente basierend auf der Höhe des Browserfensters skalieren möchten. Wenn beispielsweise die Höhe des Ansichtsfensters 400px beträgt, ist 1VH gleich 4px. Wenn die Ansichtsfensterhöhe 800px beträgt, entspricht 1VH 8px.

So wie VH mit der Höhe des Fensters zusammenhängt, sind VW -Einheiten stark mit dem Ansichtsfenster korreliert. Daher kann der Wert von 1VW ähnlich abgeleitet werden. Dies bedeutet, dass 1VW 1/100 der Ansichtsfensterbreite entspricht. Wenn beispielsweise die Breite des Fensters 1200px beträgt, ist 1 VW 12px. Verwenden Sie Ansichtsfenster, um die Breite, Höhe, Höhe und Füllen Sie CSS des Elements auf:

zu füllen

p {
  margin: 2ch;
}

codepen Demo

Ansichtsfenster Minimum (VMIN) und Ansichtsfenster Maximum (VMAX) Einheiten

Vmin -Einheit ist einer Ansichtsfensterkante mit einem niedrigeren Wert zugeordnet, sodass sie Höhe oder Breite sein kann. Der Wert von 1Vmin entspricht 1/100 der kürzesten Längekante. Wenn beispielsweise die Ansichtsfenstergröße 500 x 700 beträgt, beträgt der Wert von 1Vmin 5px. Wenn die Größe 1000 x 700 beträgt, beträgt der Wert 7px.

Im Gegensatz dazu berücksichtigt VMAX den Maximalwert des Ansichtsfensters. Der Skalierungsfaktor ist immer noch 1/100, so dass 1VMAX 1/100 der Kante mit höherem Wert entspricht. Wenn Sie das gleiche Beispiel wie oben unter Verwendung der Ansichtsfenstergröße 500 x 700 beträgt, beträgt der Wert von 1Vmax 7px. Wenn die Größe 1000 x 700 beträgt, beträgt der Wert 10px. Hier ist das CSS, das Vmin und Vmax verwendet, um Breite und Höhe zu setzen:

div {
  font-size: 1.15em;
}

span {
  font-size: 2em;
}

codepen Demo

Browserunterstützung

em, ex, px, cm, mm, in, pt und pc Alle Browser unterstützen es, einschließlich älterer IE.

ch Firefox, Chrom 27, dh 9, Safari 7 und Opera 20.

rem Alle Browser, die Support verwendet, einschließlich IE9. Wenn Sie mehr Unterstützung benötigen, finden Sie hier eine Polyfill.

vw, vh und vmin Chrom 20, dh 9, Firefox 19, Safari 6 und Opera 20. Eine Sache, die es wert ist, sich daran zu erinnern, dass Vmin im Internet Explorer durch nicht standardmäßige VM-Syntax unterstützt wird. Für Polyfill können Sie Vminpoly ausprobieren oder -Prefix -freie und Plugin verwenden.

vmax Chrome 20, Firefox 19 und Opera 20 und Safari 6.1. IE unterstützt es nicht. Sie können diese Polyfill ausprobieren, um hackige Unterstützung zu erhalten und bei einigen Fehler in verschiedenen mobilen Browsern zu helfen.

Schlussfolgerung

Dieses Tutorial führt kurz die unterschiedlichen Länge ein, die in CSS verfügbar sind, einschließlich vieler Einheiten, die reaktionsschnelle Layout- und Cross-Device-Messungen erleichtern. Haben Sie REM- oder Ansichtsfenster in einem Projekt verwendet? Wie ist deine Erfahrung? Bitte teilen Sie alle Tipps oder Probleme mit, die Sie begegnen, wenn Sie diese Einheiten im Kommentarbereich verwenden.

CSS Länge Einheit FAQ

Was sind die verschiedenen Arten von CSS -Längeneinheiten?

CSS -Längeneinheiten werden verwendet, um die Größe verschiedener Elemente auf einer Webseite anzugeben. Es gibt zwei Arten von Längeneinheiten in CSS: absolute Einheiten und relative Einheiten. Absolute Einheiten sind festgelegt und ihre Größe wird nicht auf der Grundlage anderer Eigenschaften der Seite geändert. Dazu gehören Pixel (PX), Pfund (PT), Picas (PC), Zoll (IN), Zentimeter (CM) und Millimeter (MM). Andererseits ist die relative Einheit relativ zu einem anderen Längenwert. Dazu gehören EM, EX, CH, REM, VW, VH, VMIN, VMAX und Prozentsatz (%).

Wie wähle ich die richtige CSS -Länge für mein Projekt aus?

Die Auswahl der CSS -Längeneinheiten hängt von den spezifischen Anforderungen des Projekts ab. Wenn Sie eine feste Größe benötigen, die sich unabhängig von der Bildschirmgröße oder der Schriftgröße nicht ändert, sollten Sie absolute Einheiten verwenden. Wenn Sie jedoch möchten, dass Ihr Design reaktionsschnell ist und sich an verschiedene Bildschirmgrößen oder Schriftgrößen anpasst, sollten Sie relative Einheiten verwenden.

Was ist der Unterschied zwischen "Em" und "Rem" -Initen in CSS?

"em" und "rem" sind relative Einheiten in CSS. Die Schriftgröße der "EM" -Einheit relativ zu ihrem nächsten übergeordneten Element. Andererseits steht "REM" für "Root EM", relativ zum Stammelement (HTML) und nicht für das übergeordnete Element. Dies bedeutet, dass das "REM" unabhängig von der Niststufe immer konsistent ist, was es erleichtert, die Gesamtgröße in CSS zu steuern.

Wie funktionieren "VW" und "VH" -Initen in CSS?

Die Einheiten von "VW" (Ansichtsfenster) und "VH" (Ansichtsfenster) in CSS sind relative Einheiten, die den Prozentsatz der Ansichtsfensterbreite bzw. der Höhe darstellen. Eine Einheit von "VW" entspricht 1% der Ansichtsfensterbreite, und eine Einheit von "VH" entspricht 1% der Ansichtsfensterhöhe. Diese Einheiten sind besonders nützlich, um reaktionsschnelle Designs zu erstellen, die der Ansichtsfenstergröße entsprechen.

Kann ich verschiedene CSS -Längeneinheiten in einem einzigen Projekt mischen?

Ja, Sie können verschiedene CSS -Längeneinheiten in einem einzelnen Projekt mischen. Es ist jedoch wichtig zu verstehen, wie diese Einheiten funktionieren und wie sie interagieren, um die Konsistenz und Reaktionsfähigkeit des Designs zu gewährleisten. Sie können beispielsweise "PX" für die Grenzbreite, "EM" für Schriftgröße und "VW" für die Layoutbreite verwenden, um Designs zu erstellen, die sich gut über verschiedene Bildschirmgrößen handeln.

Was sind die Vorteile der Verwendung von CSS -relativen Einheiten?

relative Einheiten in CSS bieten einige Vorteile, insbesondere in reaktionsschnellen Designs. Sie lassen die Größe der Elemente relativ zueinander, Ansichtsfenstergröße oder Standard -Schriftgröße des Benutzers skalieren. Dies macht Ihr Design flexibler und in der Lage, sich an verschiedene Bildschirmgrößen und Benutzerpräferenzen anzupassen.

Wie konvertieren Sie zwischen verschiedenen CSS -Längeneinheiten?

Umwandlung zwischen verschiedenen CSS -Längeneinheiten kann kompliziert werden, da sie von verschiedenen Faktoren wie der aktuellen Schriftgröße, der Ansichtsfenstergröße und der Pixeldichte des Bildschirms abhängt. Es gibt jedoch einige Online -Tools und Taschenrechner, die Ihnen bei diesen Conversions helfen können.

Was ist die Standard -Schriftgröße in CSS?

Die Standard -Schriftgröße in den meisten Browsern beträgt 16px. Dies bedeutet, dass 1EM oder 1REM standardmäßig 16px entspricht. Benutzer können jedoch diese Standard -Schriftgröße in ihren Browsereinstellungen ändern, weshalb relative Einheiten im Allgemeinen als Schriftartgröße empfohlen werden.

Wie wirkt sich die Pixeldichte auf die CSS -Längeneinheiten aus?

Pixeldichte bezieht sich auf die Anzahl der Pixel in einem bestimmten Bildschirm, der normalerweise in Pixel pro Zoll (PPI) gemessen wird. Bildschirme mit höherer Pixeldichte zeigen mehr Details im selben physischen Raum. In CSS ist ein Pixel (PX) kein physikalisches Pixel auf dem Bildschirm, sondern ein Referenzpixel, das eine physikalische Messeinheit ist, die die Pixeldichte des Bildschirms berücksichtigt. Dies bedeutet, dass die 1px-Länge in der CSS mehreren physikalischen Pixeln auf einem Bildschirm mit hoher Dichte entsprechen kann.

Was ist die "CH" -Einheit in CSS?

Die "CH" -Einheit in CSS ist eine relative Einheit, die die Breite des "0" (Null) -Schapers in der aktuellen Schriftart darstellt. Es ist nützlich, um Breiten oder Margen festzulegen, die unabhängig von der tatsächlichen Schriftgröße mit einer bestimmten Anzahl von Zeichen ausgerichtet werden müssen.

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