Queries voor breedte, hoogte en oriëntatie
Richt u met media features op specifieke viewportafmetingen en apparaatoriëntaties.
Queries voor breedte, hoogte en oriëntatie is een gratis CSS Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus CSS Academy bevat in totaal 4 lessen.
De mediafunctie width
De functie width richt zich op de breedte van de viewport. Gebruik min-width en max-width om bereiken vast te leggen.
<div class="box">width feature demo</div>
De mediafunctie height
De functie height richt zich op de hoogte van de viewport. Dit is nuttig voor lage viewports, zoals telefoons in landschapsstand, waar de verticale ruimte beperkt is.
<div class="hero">Hero (grows on tall viewports)</div>
Patroon voor lage viewports
Detecteer lage viewports en verklein opvulling en hoogtes die ervoor zouden zorgen dat inhoud buiten beeld komt:
<div class="modal">Modal content that scrolls when the viewport is short. Lorem ipsum dolor sit amet, consectetur.</div>
orientation: portrait en landscape
De functie orientation detecteert of de viewport hoger (portrait) of breder (landscape) is dan in de andere richting.
<div class="hero">Orientation-aware hero</div>
Pixeldichtheid van het apparaat
Richt je met de functie resolution of met de niet-standaard maar breed ondersteunde -webkit-device-pixel-ratio op schermen met een hoge pixeldichtheid (Retina).
<div class="logo"></div>
De functie aspect-ratio
Richt je op specifieke beeldverhoudingen van de viewport. Dit is nuttig om inhoud bij viewports van 4:3 anders te centreren dan bij viewports van 16:9.
<div class="video"></div>
De mogelijkheid hover
De functie hover: hover detecteert of de primaire invoer een nauwkeurige aanwijzer is die kan zweven. Dit is nuttig voor stijlen die specifiek zijn voor apparaten met aanraakinvoer.
<div class="card">Card (hover me)</div>
<div class="card is-hovered">Card (hover state shown)</div>
De functie pointer
pointer: fine is een nauwkeurige muisaanwijzer; pointer: coarse is een vinger of stylus. Dit is nuttig om de grootte van tikdoelen aan te passen.
<button>Tap target</button>
width en height combineren
Maak regels voor telefoons in landschapsstand door min-width te combineren met max-height:
<div class="nav">Nav bar</div>
Afmetingen van viewport en apparaat
CSS-mediaquery's richten zich op de viewport (het browservenster), niet op de fysieke afmetingen van het apparaatscherm. Als je het formaat van een desktopbrowservenster wijzigt, verandert de breedte van de viewport direct mee.
Viewporteenheden en mediaquery's
Mediaquery's en viewporteenheden (vw, vh) reageren op dezelfde afmetingen van de viewport. Gebruik mediaquery's voor wijzigingen in de lay-out en viewporteenheden voor vloeiende afmetingen binnen een lay-out.
Korte controle
Welke mediafunctie detecteert of een apparaat een nauwkeurige aanwijzer heeft die over elementen kan zweven?
Samenvatting
Mediafuncties zijn onder andere width, height, orientation, resolution, hover en pointer. Gebruik ze om lay-outs aan te passen aan de afmetingen van de viewport en de mogelijkheden van het apparaat. Met de functies hover en pointer kun je naast de schermgrootte ook onderscheid maken tussen apparaten met aanraakinvoer en muisapparaten.
Leer CSS met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “Queries voor breedte, hoogte en oriëntatie” gratis?
Ja — de volledige tekst van “Queries voor breedte, hoogte en oriëntatie” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Queries voor breedte, hoogte en oriëntatie”?
Richt u met media features op specifieke viewportafmetingen en apparaatoriëntaties. Je oefent met CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met CSS Academy te beginnen?
Ervaring vooraf is niet nodig. CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Queries voor breedte, hoogte en oriëntatie”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over CSS Academy?
Ja. Elke les over CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Syntaxis en veelgebruikte breakpoints
- Queries voor breedte, hoogte en oriëntatie
- Prefers-Color-Scheme en Prefers-Reduced-Motion
- Meerdere media queries combineren