Mediavragen en mobile-first-ontwikkeling
Schrijf breekpunten met min-width-mediavragen, bouw eerst de mobiele layout en verbeter deze stapsgewijs voor grotere schermen.
Mediavragen en mobile-first-ontwikkeling is een gratis Frontend Academy-les op CoddyKit. Dit is les 4 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 Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat zijn mediaquery's?
Mediaquery's passen CSS-regels alleen toe wanneer aan bepaalde voorwaarden is voldaan — bijvoorbeeld wanneer de viewportbreedte boven een drempel ligt. Ze vormen de basis van responsief ontwerp, zodat één stylesheet zich aan elke schermgrootte kan aanpassen.
Basissyntaxis
Een mediaquery wikkelt een CSS-blok in een @media-regel. De regels erin worden alleen toegepast wanneer de voorwaarde overeenkomt.
@media (min-width: 768px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}min-width tegenover max-width
min-width: pas stijlen toe wanneer de viewport minstens deze breedte heeft (mobile-first). max-width: pas stijlen toe wanneer de viewport hoogstens deze breedte heeft (desktop-first). Geef bij mobile-firstontwikkeling de voorkeur aan min-width.
/* Mobile-first (preferred): */
@media (min-width: 768px) { /* tablets and up */ }
@media (min-width: 1024px) { /* desktops and up */ }
/* Desktop-first: */
@media (max-width: 767px) { /* phones only */ }Mobile-firstaanpak
Schrijf eerst CSS voor kleine schermen (buiten elke mediaquery). Gebruik daarna mediaquery's met min-width om stapsgewijs complexiteit toe te voegen voor grotere schermen. Dit levert minder CSS op voor mobiele gebruikers en in het algemeen schonere code.
.card {
/* Mobile defaults: single column */
padding: 16px;
font-size: 0.9rem;
}
@media (min-width: 768px) {
.card {
/* Tablet enhancement */
padding: 24px;
font-size: 1rem;
}
}Veelgebruikte breekpunten
Kies breekpunten op basis van je inhoud, niet van specifieke apparaten. Populaire startpunten zijn: 480px (grote telefoons), 768px (tablets), 1024px (kleine desktops), 1280px (grote desktops). Vermijd breekpunten die op specifieke apparaatmodellen zijn gericht.
Mediatypen
Naast schermbreedte kun je ook mediatypen gebruiken: screen voor schermen en print voor printers. Met mediaquery's voor afdrukken kun je aanpassen hoe een pagina eruitziet wanneer je die afdrukt (navigatie verbergen, kleuren aanpassen).
@media print {
nav, footer, .ads {
display: none;
}
body {
font-size: 12pt;
color: black;
}
}Voorwaarden combineren met and
Combineer voorwaarden met and: pas stijlen alleen toe wanneer beide waar zijn. Gebruik not en or voor complexere logica.
@media (min-width: 768px) and (max-width: 1023px) {
/* tablets only */
}
@media (orientation: landscape) and (max-width: 767px) {
/* landscape phones */
}prefers-color-scheme
Reageer op de voorkeur van het besturingssysteem van de gebruiker voor de donkere modus. Bied standaard een donker thema zonder schakelaar.
@media (prefers-color-scheme: dark) {
body {
background: #1a202c;
color: #f7fafc;
}
}prefers-reduced-motion
Respecteer gebruikers die minder beweging verkiezen (evenwichtsstoornissen, epilepsie). Schakel animaties binnen deze mediaquery uit of vereenvoudig ze.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Containerquery's — de toekomst
Containerquery's (@container) passen stijlen toe op basis van de grootte van een bovenliggende container in plaats van de viewport. Hiermee wordt responsiviteit op echt componentniveau mogelijk, beschikbaar in alle moderne browsers sinds 2023.
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card { flex-direction: row; }
}Logische eigenschappen voor RTL-ondersteuning
Gebruik logische eigenschappen zoals margin-inline-start in plaats van margin-left voor lay-outs die werken in talen van links naar rechts én van rechts naar links. Maak je responsieve lay-outs toekomstbestendig.
Korte controle
Welke aanpak definieert de mobile-first-CSS-strategie correct?
Samenvatting: mediaquery's en mobile-first
@media (min-width: N) voor progressieve verbetering volgens mobile-first. Schrijf basisstijlen voor mobiel zonder mediaquery's. Voeg complexiteit toe voor grotere schermen. Gebruik prefers-color-scheme voor de donkere modus. Gebruik prefers-reduced-motion voor toegankelijkheid. Gebruik containerquery's voor responsiviteit op componentniveau.
Leer HTML 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
- 41
- Lessen
- 163
Veelgestelde vragen
Is de les “Mediavragen en mobile-first-ontwikkeling” gratis?
Ja — de volledige tekst van “Mediavragen en mobile-first-ontwikkeling” 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 Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat leer ik in “Mediavragen en mobile-first-ontwikkeling”?
Schrijf breekpunten met min-width-mediavragen, bouw eerst de mobiele layout en verbeter deze stapsgewijs voor grotere schermen. Je oefent met Frontend 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 Frontend Academy te beginnen?
Ervaring vooraf is niet nodig. Frontend 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 4 van 4.
Hoe lang duurt de les “Mediavragen en mobile-first-ontwikkeling”?
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 Frontend Academy?
Ja. Elke les over Frontend 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
- De viewport-metatag
- Flexbox voor layouts
- CSS Grid voor layouts
- Mediavragen en mobile-first-ontwikkeling