Abfragen von Breite, Höhe und Ausrichtung
Sprechen Sie mit Media Features bestimmte Viewport-Abmessungen und Geräteausrichtungen an.
Abfragen von Breite, Höhe und Ausrichtung ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Media Feature width
Das Feature width richtet sich nach der Viewport-Breite. Verwenden Sie min-width und max-width, um Bereiche zu definieren.
<div class="box">width feature demo</div>
Media Feature height
Das Feature height richtet sich nach der Viewport-Höhe. Es ist für kurze Viewports nützlich, etwa bei Smartphones im Querformat, wenn der vertikale Platz begrenzt ist.
<div class="hero">Hero (grows on tall viewports)</div>
Muster für kurze Viewports
Erkennen Sie kurze Viewports und reduzieren Sie Innenabstände oder Höhen, die zu einem Überlaufen des Inhalts führen würden:
<div class="modal">Modal content that scrolls when the viewport is short. Lorem ipsum dolor sit amet, consectetur.</div>
orientation: portrait und landscape
Das Feature orientation erkennt, ob der Viewport höher (portrait) oder breiter (landscape) ist als in der jeweils anderen Richtung.
<div class="hero">Orientation-aware hero</div>
Device Pixel Ratio
Richten Sie sich mit dem Feature resolution oder dem nicht standardisierten, aber weit verbreiteten -webkit-device-pixel-ratio an hochauflösende (Retina-)Bildschirme.
<div class="logo"></div>
Media Feature aspect-ratio
Richten Sie sich nach bestimmten Seitenverhältnissen des Viewports. Dies ist nützlich, um Inhalte in Viewports mit 4:3 anders zu zentrieren als in Viewports mit 16:9.
<div class="video"></div>
hover-Fähigkeit
Das Feature hover: hover erkennt, ob die primäre Eingabe ein präzises Zeigegerät ist, das Hovering unterstützt. Es ist nützlich für Stile speziell für Touch-Geräte.
<div class="card">Card (hover me)</div>
<div class="card is-hovered">Card (hover state shown)</div>
Media Feature pointer
pointer: fine steht für einen präzisen Mauszeiger; pointer: coarse für einen Finger oder Eingabestift. Dies ist nützlich, um die Größe von Tippzielen anzupassen.
<button>Tap target</button>
width und height kombinieren
Erstellen Sie durch die Kombination von min-width und max-height Regeln speziell für Smartphones im Querformat:
<div class="nav">Nav bar</div>
Viewport- vs. Gerätemaße
CSS Media Queries richten sich an den Viewport (das Browserfenster), nicht an die Abmessungen des physischen Gerätebildschirms. Wenn Sie die Größe des Desktop-Browserfensters ändern, ändert sich die Viewport-Breite in Echtzeit.
Viewport-Einheiten und Media Queries
Media Queries und Viewport-Einheiten (vw, vh) reagieren auf dieselben Viewport-Abmessungen. Verwenden Sie Media Queries für Layoutänderungen und Viewport-Einheiten für fluide Größen innerhalb eines Layouts.
Kurzer Check
Welches Media Feature erkennt, ob ein Gerät über ein präzises Zeigegerät verfügt, das Elemente per Hover ansteuern kann?
Zusammenfassung
Zu den Media Features gehören width, height, orientation, resolution, hover und pointer. Verwenden Sie sie, um Layouts an Viewport-Abmessungen und Gerätefähigkeiten anzupassen. Mit den Features hover und pointer können Sie über die reine Bildschirmgröße hinaus zwischen Touch- und Mausgeräten unterscheiden.
Häufig gestellte Fragen
Ist die Lektion „Abfragen von Breite, Höhe und Ausrichtung“ kostenlos?
Ja — der vollständige Text von „Abfragen von Breite, Höhe und Ausrichtung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Abfragen von Breite, Höhe und Ausrichtung“?
Sprechen Sie mit Media Features bestimmte Viewport-Abmessungen und Geräteausrichtungen an. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Abfragen von Breite, Höhe und Ausrichtung“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Syntax und gängige Breakpoints
- Abfragen von Breite, Höhe und Ausrichtung
- Prefers-Color-Scheme und Prefers-Reduced-Motion
- Mehrere Media Queries kombinieren