Media queries forklaret: Sådan tilpasser du dit layout til alle skærmstørrelser
Media queries forklaret: Sådan tilpasser du dit layout til alle skærmstørrelser
Når du besøger et website på din mobil, tablet eller computer, forventer du, at indholdet ser godt ud – uanset skærmstørrelsen. Det er her, media queries kommer ind i billedet. De er et centralt værktøj i moderne webdesign, der gør det muligt at tilpasse layout, tekst og billeder til forskellige enheder. I denne artikel får du en grundig forklaring på, hvad media queries er, hvordan de fungerer, og hvordan du kan bruge dem til at skabe et responsivt design, der ser professionelt ud på alle skærme.
Hvad er en media query?
En media query er en del af CSS (Cascading Style Sheets), som gør det muligt at anvende forskellige stilarter afhængigt af brugerens enhed. Det kan for eksempel være skærmens bredde, højde, opløsning eller orientering (stående eller liggende).
Kort sagt fortæller en media query browseren: “Hvis skærmen har disse egenskaber, så brug disse regler.” Det betyder, at du kan definere ét sæt regler for store skærme og et andet for små – uden at skulle lave flere versioner af dit website.
Hvorfor er media queries vigtige?
I dag besøger brugere websites fra et væld af enheder: smartphones, tablets, laptops, store skærme og endda smart-tv’er. Et fast layout, der kun passer til én skærmstørrelse, vil hurtigt virke klodset og uoverskueligt på andre enheder.
Media queries gør det muligt at:
- Forbedre brugeroplevelsen – indholdet bliver lettere at læse og navigere i.
- Øge tilgængeligheden – alle brugere får en god oplevelse, uanset enhed.
- Optimere ydeevnen – du kan skjule eller ændre elementer, så siden indlæses hurtigere på små enheder.
- Fremstå professionel – et responsivt design signalerer kvalitet og omtanke.
Sådan fungerer media queries i praksis
En typisk media query i CSS ser sådan ud:
@media (max-width: 768px) {
body {
font-size: 16px;
}
}
Denne regel betyder, at når skærmen er 768 pixels bred eller mindre, ændres tekststørrelsen til 16 pixels. Du kan bruge mange forskellige egenskaber i dine media queries, men de mest almindelige er:
- max-width – gælder for skærme op til en bestemt bredde.
- min-width – gælder for skærme fra en bestemt bredde og opefter.
- orientation – kan bruges til at skelne mellem stående (portrait) og liggende (landscape) visning.
- resolution – nyttig, hvis du vil tilpasse billeder til skærme med høj opløsning (som Retina-skærme).
Mobile first – en moderne tilgang
Tidligere designede man ofte websites ud fra store skærme og tilpassede dem derefter til mindre. I dag anbefales det at gøre det omvendt – en tilgang kaldet mobile first.
Det betyder, at du først designer og koder layoutet til mobilvisning og derefter gradvist tilføjer flere elementer og justeringer til større skærme. Fordelen er, at du sikrer en hurtig og enkel oplevelse på små enheder, som ofte har langsommere forbindelser og mindre skærmplads.
Et eksempel på mobile first-tilgang:
/* Grundlæggende stil for mobil */
body {
font-size: 16px;
}
/* Tilføj ændringer for større skærme */
@media (min-width: 768px) {
body {
font-size: 18px;
}
}
Gode råd til brug af media queries
At bruge media queries effektivt handler ikke kun om teknik, men også om planlægning og designforståelse. Her er nogle praktiske tips:
- Planlæg dine breakpoints – vælg de skærmstørrelser, hvor layoutet naturligt skal ændre sig. Typiske breakpoints er 480px, 768px, 1024px og 1200px.
- Test på rigtige enheder – selvom browserens udviklerværktøjer er nyttige, kan virkelige enheder afsløre detaljer, du ellers overser.
- Undgå for mange regler – for mange media queries kan gøre din CSS uoverskuelig. Hold det simpelt.
- Tænk i fleksible enheder – brug procent, em eller rem i stedet for faste pixelmål, så layoutet skalerer bedre.
- Brug billeder med omtanke – sørg for, at billeder automatisk tilpasser sig skærmens bredde, fx med
max-width: 100%;.
Eksempler på brug i layout
Forestil dig, at du har et website med tre kolonner på desktop. På tablet vil du måske kun vise to, og på mobil én. Det kan du styre med media queries:
/* Desktop */
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
/* Tablet */
@media (max-width: 1024px) {
.container {
grid-template-columns: 1fr 1fr;
}
}
/* Mobil */
@media (max-width: 600px) {
.container {
grid-template-columns: 1fr;
}
}
På den måde får du et layout, der automatisk tilpasser sig, uden at du skal ændre HTML-strukturen.
Fremtiden for responsive design
Media queries har været en hjørnesten i responsivt design i over et årti, men teknologien udvikler sig. Nye standarder som container queries og CSS Grid giver endnu mere fleksibilitet, fordi de gør det muligt at tilpasse designet ud fra det enkelte elements størrelse – ikke kun hele skærmen.
Alligevel vil media queries fortsat være et uundværligt værktøj i mange år fremover. De er enkle, effektive og understøttes af alle moderne browsere.
Læs også:
Konklusion: Et værktøj, du ikke kan undvære
Media queries er nøglen til at skabe websites, der fungerer på tværs af enheder. De giver dig kontrol over, hvordan dit indhold præsenteres, og sikrer, at brugerne får en god oplevelse – uanset om de besøger din side fra en mobil i toget eller en stor skærm derhjemme.
Ved at kombinere teknisk forståelse med et gennemtænkt design kan du skabe et layout, der både er smukt, funktionelt og fremtidssikret.
Læs også:
