Media queries i CSS: slik bygger du layouts som fungerer på mobil først

Mange nettsteder ser greie ut på en stor skjerm, men faller helt fra hverandre på en mobil. Ofte skyldes det at layouten er bygget for desktop først, og at media queries bare lappes på i etterkant.

Ved å bruke mobile-first media queries og noen få gjennomtenkte brytepunkter kan du lage fleksible sider som skalerer naturlig. Denne artikkelen viser hvordan, med konkret kode du kan bruke i egne prosjekter.

Hva media queries faktisk gjør

Media queries er regler i CSS som slår inn når visse betingelser er oppfylt, typisk skjermbredde. Nettleseren leser stilarket, sjekker forhold som bredde eller preferanser, og bruker de reglene som passer.

Den vanligste bruken er å endre layout når bredden blir større enn et visst punkt, slik at innholdet ikke blir presset eller for bredt. Resultatet er at samme HTML kan presenteres på flere måter, uten duplisering av innhold.

Mobile first: start smalt, bygg utover

I stedet for å designe for stor skjerm og så “krympe ned”, lønner det seg å starte med mobilvisningen. Da skriver du grunnstilen uten media queries, og legger på endringer for større skjermer medmin-width.

Det gir tre fordeler: du prioriterer viktig innhold, CSS-en blir ofte kortere, og mobilbrukere slipper å laste unødvendige regler for brede skjermer som kanskje ikke gjelder dem.

Grunnstruktur uten media queries

Et typisk utgangspunkt kan se slik ut:

Eksempel:

body {
font-family: system-ui, sans-serif;
margin: 0;
padding: 1rem;
}

.layout {
display: flex;
flex-direction: column;
gap: 1.5rem;
}

.sidebar {
order: 2;
}

.main {
order: 1;
}

Her ser vi for oss at alt ligger under hverandre på mobil. Ingen media queries enda, bare en lineær layout som er lett å skrolle.

Velg færre, men smartere brytepunkter

En vanlig feil er å definere et brytepunkt for hver enhet: 320 px, 375 px, 414 px og så videre. Det gir fort kaotisk CSS og gjør vedlikehold tungt. Bygg heller på innholdet, ikke enheten.

Det betyr at du ser på hvor designet faktisk begynner å knekke. Når en linje blir for lang, et kort brytes rart, eller sidemenyen blir for trang, da trenger du et brytepunkt.

Typiske utgangspunkt for bredder

Nøyaktige tall varierer, men mange prosjekter klarer seg lenge med noe i denne retningen:

• Rundt 600–700 px: overgang fra ren mobil til liten nettbrett / liggende mobil
• Rundt 900–1000 px: overgang til “ordentlig” fler-spalte layout
• Eventuelt et ekstra rundt 1200 px hvis du har mye tekst og vil begrense linjelengde

Test i nettleserens utviklerverktøy ved å dra i bredden, og sett brytepunktene der layouten faktisk trenger støtte.

Bygg oppover med min-width media queries

La oss si at vi vil gjøre layouten todelt når skjermen er bred nok: innhold til venstre og sidebar til høyre. Da kan vi legge til en enkel media query.

Eksempel:

@media (min-width: 768px) {
.layout {
flex-direction: row;
align-items: flex-start;
}

.main {
flex: 2;
order: 1;
}

.sidebar {
flex: 1;
order: 2;
}
}

På skjermer under 768 px ligger alt fortsatt i en kolonne. Over 768 px får vi to kolonner med rimelig forhold mellom innhold og sidebar.

Media queries som forbedrer lesbarhet

Media queries handler ikke bare om kolonner. Små justeringer av skriftstørrelse, luft og linjelengde kan gjøre siden mye mer behagelig å lese.

På små skjermer bør teksten ofte være litt større enn mange tror, mens linjelengden på store skjermer bør begrenses for at øyet skal slippe å hoppe for langt.

Eksempel på typografi som skalerer

body {
font-size: 16px;
line-height: 1.5;
}

@media (min-width: 600px) {
body {
font-size: 17px;
}
}

@media (min-width: 900px) {
body {
font-size: 18px;
max-width: 70ch;
margin: 0 auto;
}
}

Her sørger media queries for at teksten er lesbar på små skjermer, men ikke blir en ekstremt lang linje på store skjermer.

Gjør designet robust for ulike enheter

Det er lett å teste i én nettleser på egen maskin og anta at alt er greit. I praksis vil nettsiden vises på mange forskjellige skjermer, rotasjoner og zoom-nivåer.

For å unngå ubehagelige overraskelser er det lurt å bruke fleksible enheter og unngå absolutte bredder som tvinger innholdet til å være større enn skjermen.

Konkrete tips for robuste media queries

• Bruk prosent, fr-enheter ogmax-widthi stedet for faste piksler der det gir mening
• Unngå faste høyder på blokker med tekst, la innholdet bestemme høyden
• Test både stående og liggende visning på mobil og nettbrett
• Prøv zoom i nettleseren for å se hvordan siden oppfører seg når tekst skaleres

Tilgjengelighet: mer enn skjermbredde

Media queries kan også ta hensyn til folks preferanser, for eksempel redusert bevegelse. Det gjør løsningen mer inkluderende og mer behagelig for flere.

Et vanlig eksempel er å skru ned animasjoner for dem som har valgt dette i operativsystemet sitt.

Eksempel med prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
* {
scroll-behavior: auto;
}

.animated-element {
animation-duration: 0.01ms;
animation-iteration-count: 1;
transition: none;
}
}

På denne måten kan du beholde animasjoner for de fleste, samtidig som du respekterer dem som blir slitne eller uvel av for mye bevegelse.

Typiske feil og hvordan du unngår dem

Noen fallgruver går igjen i mange prosjekter, uansett størrelse. Heldigvis er de ofte enkle å rette når du først ser dem.

• For mange brytepunkter:slå sammen og tenk innholdsbasert i stedet for enhetsbasert
• Desktop first:start på mobil og legg på forbedringer for bredere skjermer
• Overstyringer overalt:rydd ved å la grunnstilen være god nok på mobil, og kun endre det som trengs senere
• Ignorerer mellom-bredder:test også “kjedelige” størrelser som en smal laptop eller et lite nettbrett i liggende format

En liten sjekkliste før du går videre

Når du mener layouten er klar, kan du gå gjennom en rask sjekkliste for å se om media queries brukes fornuftig.

• Fungerer innholdet uten en eneste media query, på en liten skjerm?
• Har du høyst noen få hovedbrytepunkter du kan forklare begrunnelsen for?
• Endrer du heller struktur enn å gjemme viktig innhold på små skjermer?
• Har du testet både med mus, tastatur og berøring, minst i én mobil og én desktop nettleser?

Hvis svaret stort sett er ja, er du på god vei til en robust løsning som tåler både nye enheter og fremtidige justeringer.