Media queries i CSS forklart

Du har en responsiv layout med kolonner og flexbox, men du har ingen kontroll over når layouten endrer seg. Nettleseren bestemmer alt selv. Media queries i CSS gir deg den kontrollen. Du definerer regler som sier nøyaktig hva som skal skje ved ulike skjermbredder. Bakgrunnen skal bli rød på mobil, kolonnene skal stables vertikalt under 768 piksler, og teksten skal bli større på store skjermer. Alt styres med media queries.

Slik fungerer media queries i CSS

En media query starter alltid med nøkkelordet @media, etterfulgt av en eller flere regler i parentes. Innenfor klammeparentesene skriver du vanlig CSS som bare gjelder når reglene er oppfylt. Den vanligste regelen er min-width, som betyr at CSS-en slår inn når nettleservinduet er den angitte bredden eller bredere.

Du kan også bruke max-width for å treffe skjermer som er smalere enn en gitt verdi. Min-width brukes i mobile-first-tilnærmingen der du bygger fra liten til stor skjerm, mens max-width brukes når du starter med desktop og tilpasser nedover.

Media types: skjerm, print og mer

Media queries kan gjøre mer enn å sjekke bredden. Du kan også definere hvilken type enhet CSS-en gjelder for. Med screen treffer du bare skjermer. Med print treffer du utskriftsversjonen av nettsiden. Med all gjelder CSS-en for alle enhetstyper.

Print-media queries er nyttige når du vil at nettsiden skal se annerledes ut på papir. Du kan skjule navigasjonsmenyen, endre bakgrunnsfarger og justere skriftstørrelser slik at utskriften blir lesbar. Nettleseren viser print-CSS-en når brukeren velger "Skriv ut" fra menyen. Under vanlig nettlesing brukes screen-reglene.

Logiske operatorer: and, or og not

Du kan kombinere flere regler med logiske operatorer. Med and må alle regler oppfylles. Du kan for eksempel si at skjermbredden skal være minimum 800 piksler og maksimum 1000 piksler. Da treffer CSS-en bare vindusstørrelser mellom 800 og 1000 piksler. Med komma fungerer reglene som or, der en av reglene er nok.

Du kan også kombinere media type med bredde. En regel som sier screen, min-width 600 piksler og orientation landscape, treffer bare skjermer som er minst 600 piksler brede og i liggende format. Slike spesifikke regler er nyttige for nettbrett som kan roteres mellom stående og liggende modus.

Orientation: landscape og portrait

Egenskapen orientation sjekker om skjermen er bredere enn den er høy (landscape) eller høyere enn den er bred (portrait). Dette er spesielt relevant for nettbrett og mobiler som kan roteres. Du kan vise en annen layout når iPaden er i landskapsmodus enn i portrettmodus.

I praksis brukes orientation sjeldnere enn bredde-baserte media queries. De fleste responsive design fungerer godt med bare min-width eller max-width. Men det er nyttig å vite at muligheten finnes for spesielle tilfeller.

Vanlige breakpoints og beste praksis

De mest brukte breakpoints er 768 piksler for nettbrett og 992 piksler for desktop. Noen legger også til 576 piksler for store mobiler og 1200 piksler for ekstra brede skjermer. Men det finnes ingen faste regler. Velg breakpoints basert på hvor layouten din faktisk trenger å endre seg, ikke basert på spesifikke enheter.

I daglig bruk holder det nesten alltid med min-width eller max-width. De avanserte mulighetene som media types, orientation og logiske operatorer er tilgjengelig når du trenger dem, men de fleste responsive design klarer seg uten. For en komplett oversikt over alle media features, se MDN sin dokumentasjon om media queries.

Media queries og rekkefølge

Rekkefølgen på media queries i CSS-filen har betydning. Hvis to media queries begge treffer, vinner den som kommer sist. Derfor plasserer du breakpoints i stigende rekkefølge når du bruker min-width: først 768 piksler, deretter 992 piksler. Den bredeste regelen overstyrer de smalere når skjermen er stor nok. Blander du rekkefølgen, kan resultatet bli uforutsigbart. Forstår du hvordan måleenheter i CSS fungerer, blir det enklere å velge riktige verdier for breakpoints.