Ein Überblick über CSS -Größeneinheiten

In diesem Artikel werden die vier Hauptkategorien von CSS-Größeneinheiten untersucht: Absolute, Schriftbeziehung, Ansichtsfenster und Container-Relativ. Wir untersuchen ihren Zweck, optimale Anwendungsfälle und Auswahlstrategien, um reaktionsschnelle und anpassbare Weblayouts über verschiedene Geräte und Bildschirmgrößen hinweg zu erstellen.

Schlüsselkonzepte:

1. CSS -Größeneinheit Übersicht: Wir werden die verschiedenen CSS -Größeneinheiten einführen und sie in die vier oben genannten Kategorien einteilen. Das Verständnis der Differenz zwischen angegeben , berechnet und verwendet -Werte in CSS ist für die effektive Anwendung von entscheidender Bedeutung.

2. Detaillierte Einheitentypen: Wir werden uns mit den Einzelheiten jeder Einheit befassen. Absolute Einheiten bleiben in den Medien konsistent; Schriftelement-Einheiten skalieren mit Schriftgröße; Ansichtsfenster-Relativeinheiten passt sich an das Browserfenster an. und Container-Relativeinheiten hängen von den Dimensionen ihres übergeordneten Elements ab. Praktische Beispiele und Anwendungsfälle veranschaulichen ihre Anwendungen.

3. Praktische Anwendung und Best Practices: Der Artikel endet mit Anleitung zur Auswahl der entsprechenden Einheit für verschiedene Designszenarien. Wir empfehlen, absolute Einheiten für feste Abmessungen, Schriftbeziehungseinheiten für skalierbare Typografie, Ansichtsfenstereinheiten für reaktionsschnelles Design und containerbezogene Einheiten für flexible Komponenten innerhalb verschiedener Layouts zu verwenden. Ziel ist es, die Lesbarkeit, Benutzerfreundlichkeit und Zugänglichkeit der Website auf verschiedene Geräte zu verbessern.

Verständnis von CSS -Größeneinheiten

CSS bietet verschiedene Methoden zum Angeben von Elementgröße oder Länge. Diese Einheiten fallen in vier Kategorien:

• Absolute Einheiten: cm, px, in usw. Diese Einheiten sind fest und unabhängig von anderen Elementen oder dem Ansichtsfenster.
• Schriftrelative Einheiten: em, rem, ch, ex usw. Diese Einheiten sind relativ zur Schriftgröße des Elements oder seines Wurzelelements.
• Ansichtsfenster-Relativeinheiten: vw, vh, vmin, vmax usw. Diese Einheiten sind relativ zu den Dimensionen des Browser-Ansichtsfenpfers.
• Container-Relative Einheiten: cqw, cqh, cqmin, cqmax usw. Diese Einheiten sind relativ zu den Dimensionen des Blocks des Elements (Containerabfragekontext).

Bevor Sie vorgehen, überprüfen wir die Schlüsselbegriffe:

• angegebener Wert: Der im Stylesheet definierte Wert.
• Berechterer Wert: Der Wert nach den Browser -Kaskaden- und Erbschaftsregeln wird angewendet.
• Gebrauchtwert: Der Endwert nach den Browseranpassungen und -umwandlungen (relative Einheiten zu absoluten, physischen Einheiten zu Pixel).

Absolute Einheiten

absolute Einheiten sind an spezifische medienabhängige Messungen gebunden. Für den Druck entsprechen sie physischen Einheiten; Für Bildschirme beziehen sie sich auf Pixel (ungefähr 1/96. Zoll). Beispiele sind in, cm, mm, Q, pt und pc. Tabelle 1 fasst diese Einheiten und ihre Äquivalente zusammen. Vermeiden Sie es jedoch, sie für bekannte physikalische Abmessungen zu verwenden, da sie aufgrund ihrer mangelnden Skalierbarkeit für Benutzer mit angepassten Browser -Schriftgrößen für Schriftarten verwendet werden.

.

font-relative Einheiten

font-size Schriftbeziehungseinheiten verwenden Schriftmetriken, um Elementabmessungen zu bestimmen. Diese können relativ zum font-size (lokalen) oder dem Stammelement em (root-relativ) sein. rem und em sind häufige Beispiele. font-size ist relativ zum rem des Elternteils, während font-size relativ zum ch des Stammelements ist. Andere Einheiten wie ex, ic, rch und ihre root-relativen Gegenstücke (rex, ric, lh) basieren auf Glyphendimensionen (die visuelle Darstellung eines Zeichens). Diese können zwischen Schriftarten erheblich variieren und die endgültige gerenderte Größe beeinflussen. Zeilenhöheneinheiten (rlh und

) sind ebenfalls in dieser Kategorie enthalten.

Ansichtsfenster-Relativeinheiten

vw Ansichtsfenster-Relativeinheiten hängen von den Dimensionen des Browserfensters ab. Sie sind relativ zum Anfangsblock (Ansichtsfenster oder Seite für ausgelastete Medien) berechnet. vh und vmin stellen 1% der Breite und Höhe des Ansichtsfensatzes dar. vmax und vw sind kleiner und größer von vh bzw. dvw. Dynamische Ansichtsfenster -Einheiten (dvh,

usw.) Passen Sie sich an, wenn sich das Ansichtsfenster aufgrund von Browser -Schnittstellenelementen ändert. Diese Einheiten sind wertvoll, um Vollbild-Elemente und Fluid-Typografie zu erstellen.

Container-Relativeinheiten

Container-Relativeinheiten (oder Container-Abfragelängeneinheiten) werden relativ zum Block des Elements berechnet, das mit Containerabfragen verwendet wird. cqw und cqh stellen 1% der Breite und Höhe des Behälters dar. cqi und cqb sind relativ zu den Inline- und Blockgrößen und werden von der writing-mode -Reatur beeinflusst. cqmin und cqmax sind kleiner und größer von cqi und cqb. Diese Einheiten ermöglichen die Erstellung von Komponenten, die sich an verschiedene Kontexte anpassen.

Schlussfolgerung

Mastering CSS -Größeneinheiten ist der Schlüssel zum Erstellen reaktionsfähiger und anpassungsfähiger Weblayouts. Die Auswahl der Einheit wirkt sich erheblich auf die Lesbarkeit, Benutzerfreundlichkeit und Zugänglichkeit der Website aus. Wählen Sie Einheiten basierend auf Entwurfsanforderungen, Zielgeräten und Zugänglichkeitsanforderungen. Eine Kombination verschiedener Einheiten ist oft der effektivste Ansatz. Der folgende Abschnitt enthält einen häufig gestellten Fragenabschnitt zur weiteren Klärung.

(Häufig gestellte Fragen wird hier folgen, die die Struktur und den Inhalt des ursprünglichen FAQ -Abschnitts widerspiegeln.)

Das obige ist der detaillierte Inhalt vonEin Überblick über CSS -Größeneinheiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!