Media queries i CSS: standardkoder for mobil og nettbrett

Når du bygger et nettsted i dag, forventer leserne at det ser bra ut uansett om de sitter med mobil, nettbrett, laptop eller en stor skjerm. Nøkkelen til dette er media queries i CSS – små regler som lar deg bruke ulik styling avhengig av hvor bredt skjermen (egentlig nettleservinduet) er. I mange år sirkulerte det et «standardsett» med media queries som satte faste grenser for iPhone, iPad og lignende. Mye av det er nå avleggs. Her går vi gjennom hvordan media queries faktisk fungerer, et moderne og oppdatert kodesett du kan bruke som utgangspunkt, hvilke brytepunkter som er fornuftige, og de vanligste feilene du bør unngå.

Hva er media queries i CSS?

En media query er en CSS-regel som bare slår inn når bestemte betingelser er oppfylt – typisk at skjermen er bredere eller smalere enn en gitt verdi. Du pakker vanlige CSS-regler inn i en @media-blokk, og nettleseren bruker dem kun når betingelsen stemmer. Slik kan samme HTML-side vise ett oppsett på en smal telefon og et annet på en bred skjerm, uten at du lager flere versjoner av nettstedet.

En enkel media query ser slik ut:

@media (min-width: 768px) {
  /* Disse stilene gjelder bare når vinduet er minst 768px bredt */
  .meny { display: flex; }
}

«Betingelsen» kalles et media feature. De vanligste er min-width og max-width, som ser på bredden til visningsområdet (viewporten). Men du kan også sjekke høyde, orientering (stående eller liggende), skjermoppløsning og til og med om brukeren foretrekker mørkt tema. Teknikken er selve grunnmuren i det som kalles responsivt webdesign – nettsider som tilpasser seg skjermen i stedet for å ha én fast bredde.

Hvorfor de gamle «standardkodene» er utdaterte

Det klassiske kodesettet som lå til grunn for denne artikkelen tidligere, brukte media features som min-device-width og max-device-width, ofte med faste verdier som 320px, 480px, 768px og 1024px knyttet til bestemte Apple-enheter. Disse kodene er ikke lenger anbefalt – flere av dem er direkte avleggs (deprecated).

Forskjellen er viktig: device-width måler den fysiske skjermstørrelsen på enheten, mens width måler bredden på selve nettleservinduet (viewporten). Problemet med device-width er at den ikke endrer seg når brukeren zoomer, endrer vindusstørrelse eller bruker nettstedet i et delt vindu. Resultatet er layouter som ikke tilpasser seg slik de burde. I CSS-spesifikasjonen Media Queries Level 4 og 5 er min-device-width, max-device-width og tilsvarende enhetsbaserte features derfor markert som avleggs, og kodevalidatorer flagger dem som feil.

I tillegg var det en vanlig misforståelse at man måtte «treffe» hver enkelt telefon- og nettbrettmodell med egne brytepunkter. Det finnes i dag tusenvis av skjermstørrelser, så den strategien gir mening verken praktisk eller vedlikeholdsmessig. Moderne praksis er å la innholdet bestemme hvor layouten bør endres – ikke en bestemt modell av iPhone eller iPad.

Kort sagt: bytt ut min-device-width/max-device-width med min-width/max-width, og slutt å tenke på bestemte enheter.

Mobil-først: den moderne tilnærmingen

Den mest robuste måten å skrive media queries på i dag er mobil-først (mobile-first). Det betyr at du skriver basestilene dine for den smaleste skjermen – en vanlig mobil – helt uten media query. Deretter legger du gradvis til stiler for større skjermer ved hjelp av min-width. Fordelen er at den enkleste varianten fungerer overalt, også på svake enheter, og at du bare legger til kompleksitet der det trengs.

Alternativet, å starte med desktop og bruke max-width for å «skru av» ting nedover, kalles desktop-først. Det fungerer, men fører ofte til mer overskriving av stiler og vanskeligere vedlikehold. De fleste moderne rammeverk, som Bootstrap og Tailwind CSS, er bygget mobil-først med min-width.

Et mobil-først-oppsett følger dette mønsteret:

1. Basestiler uten media query – gjelder alle skjermer, optimalisert for mobil.
2. En serie min-width-queries som legger til stiler etter hvert som skjermen blir bredere.
3. Spesialtilfeller som høyoppløselige skjermer og brukerpreferanser helt til slutt.

Et moderne standardsett med media queries

Her er et oppdatert utgangspunkt du trygt kan kopiere inn i stilarket ditt og fylle med egne stiler. Legg merke til at brytepunktene er oppgitt i em i stedet for piksler (mer om hvorfor lenger ned), og at settet er mobil-først:

/* Basestiler gjelder alle skjermer (mobil-først) */

/* Stor mobil og oppover (~600px) */
@media (min-width: 37.5em) {
  /* Stiler */
}

/* Nettbrett stående og oppover (~768px) */
@media (min-width: 48em) {
  /* Stiler */
}

/* Liten laptop og oppover (~1024px) */
@media (min-width: 64em) {
  /* Stiler */
}

/* Desktop og oppover (~1280px) */
@media (min-width: 80em) {
  /* Stiler */
}

/* Store skjermer (~1440px og oppover) */
@media (min-width: 90em) {
  /* Stiler */
}

/* Høyoppløselige skjermer (Retina m.m.) */
@media (min-resolution: 2dppx) {
  /* Skarpe bilder og ikoner */
}

Omregningen er grei å ha i bakhodet fordi 1em her tilsvarer 16px: 37.5em = 600px, 48em = 768px, 64em = 1024px, 80em = 1280px og 90em = 1440px. Du trenger sjelden alle brytepunktene i ett prosjekt – ta med dem du faktisk har bruk for. Når du er ferdig, bør du alltid validere CSS- og HTML-koden for å fange opp avleggs features og skrivefeil.

Hvilke brytepunkter bør du bruke?

Det finnes ingen offisielle «riktige» brytepunkter – de beste punktene er der innholdet ditt begynner å se dårlig ut, ikke der en bestemt telefon slutter. Likevel er det nyttig å kjenne til verdiene de store rammeverkene bruker, både fordi de er godt uttestet og fordi du ofte møter dem i praksis. Bootstrap 5 og Tailwind CSS ligger tett opp til hverandre, men ikke helt likt:

Et praktisk råd er å starte med noen få brytepunkter – for eksempel ett rundt nettbrettbredde (~768px) og ett rundt laptop-bredde (~1024px) – og bare legge til flere når designet faktisk krever det. Jo færre brytepunkter du har, desto enklere er det å vedlikeholde. Test gjerne ved å dra nettleservinduet smalere og bredere: der layouten «brekker», har du et naturlig brytepunkt.

Ny syntaks: område-media queries (range)

En nyere og mer lesbar måte å skrive grenser på er range-syntaks, der du bruker matematiske sammenligningstegn som <, >, <= og >= rett i media queryen. I stedet for å kombinere min-width og max-width kan du skrive intervaller direkte:

/* Gammel måte */
@media (min-width: 48em) and (max-width: 63.99em) {
  /* Kun nettbrett */
}

/* Ny range-syntaks */
@media (48em <= width < 64em) {
  /* Kun nettbrett – samme resultat, enklere å lese */
}

Range-syntaksen fjerner også den klassiske «off-by-one»-fellen der du måtte skrive 63.99em for å unngå overlapp. Støtten er god: funksjonen kom i Chrome 104 (august 2022), Firefox 102 (juni 2022) og Safari 16.4 (mars 2023), og regnes nå som bredt tilgjengelig (Baseline «widely available» fra september 2025). Har du en del besøkende på eldre nettlesere, kan du fortsatt bruke den tradisjonelle min-/max-width-formen som er trygg overalt.

Container queries – neste steg etter media queries

Media queries ser alltid på hele visningsområdet. Men noen ganger vil du at en komponent – for eksempel et kort eller en sidestolpe – skal tilpasse seg bredden på beholderen den ligger i, ikke bredden på hele skjermen. Det er akkurat dette container queries løser.

Med en container query merker du et element som en «container», og lar barneelementene reagere på containerens bredde:

.kort-liste {
  container-type: inline-size;
}

@container (min-width: 30em) {
  .kort {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

Det betyr at samme kort automatisk kan vise ett oppsett i en smal sidestolpe og et annet i et bredt hovedinnhold – helt uavhengig av skjermbredden. Container queries ble en del av Baseline i 2023 (Chrome og Edge 105, Firefox 110 i februar 2023 og Safari 16), og regnes som bredt tilgjengelig fra august 2025. De erstatter ikke media queries, men er et kraftig supplement for gjenbrukbare komponenter.

Skjermoppløsning og Retina-skjermer

Telefoner og moderne skjermer har ofte langt flere fysiske piksler enn CSS-piksler – det er dette som gjør tekst og bilder knivskarpe på en såkalt Retina-skjerm. For å servere skarpere grafikk til slike skjermer bruker du media featuren resolution, vanligvis med enheten dppx (device pixels per CSS pixel):

/* Standardbilde for vanlige skjermer er allerede satt */

@media (min-resolution: 2dppx) {
  .logo {
    background-image: url([email protected]);
    background-size: 120px 40px;
  }
}

Verdien 2dppx treffer skjermer med dobbel pikseltetthet (det mange kaller «2x» eller Retina). Du kan også skrive bare 2x som en kortform. I det gamle kodesettet ble dette løst med -webkit-min-device-pixel-ratio: 1.5. Den prefiksede varianten fungerer fortsatt som reserveløsning for svært gamle nettlesere, men min-resolution er standarden og har vært støttet i alle store nettlesere – inkludert Safari fra versjon 16 – siden høsten 2022. Husk at skarpere bilder også betyr større filer, så bruk dem bevisst der det gir synlig gevinst, for eksempel logoer og ikoner.

Media queries for brukerpreferanser

Media queries handler ikke bare om størrelse. Moderne CSS lar deg også reagere på hva brukeren har valgt i operativsystemet sitt, noe som er viktig både for brukeropplevelse og universell utforming. To av de mest nyttige er:

• prefers-color-scheme – om brukeren foretrekker lyst eller mørkt tema. Med denne kan du lage et mørkt tema («dark mode») helt uten JavaScript.
• prefers-reduced-motion – om brukeren har bedt om mindre bevegelse. Da bør du dempe eller fjerne animasjoner, noe som hjelper personer som blir uvel av bevegelse.

@media (prefers-color-scheme: dark) {
  body { background: #121212; color: #eee; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

Begge disse har vært bredt tilgjengelige i mange år – prefers-reduced-motion siden januar 2020 og prefers-color-scheme omtrent like lenge – så du kan trygt ta dem i bruk i produksjon.

Viewport-metataggen – forutsetningen for responsivt design

En feil som overrasker mange nybegynnere: selv med perfekte media queries vil nettstedet se ut som en nedskalert desktop-side på mobil hvis du glemmer viewport-metataggen. Den forteller mobilnettleseren at den skal bruke enhetens faktiske bredde i stedet for å late som om skjermen er ~980px bred. Legg derfor alltid denne linjen i <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Uten denne taggen slår media queries basert på width ikke inn slik du forventer, fordi nettleseren rapporterer en annen bredde enn den fysiske skjermen. Dette er grunnlaget for at nettstedet blir et mobilvennlig WordPress-nettsted eller en responsiv side bygget fra bunnen av.

Vanlige feil å unngå

Responsivt design ser enkelt ut, men de samme fellene går igjen. Her er de vanligste:

• Bruke avleggs device-width: som nevnt er min-device-width/max-device-width utdatert. Bruk min-width/max-width.
• Glemme viewport-metataggen: uten den virker ikke media queries riktig på mobil.
• Jakte på enkeltmodeller: ikke lag brytepunkter for «iPhone 14» eller «iPad Air». Sett punktene der innholdet krever det.
• Blande mobil-først og desktop-først: velg én strategi og hold deg til den gjennom hele stilarket.
• For mange brytepunkter: fem–seks gjennomtenkte punkter er nesten alltid nok. Flere gir bare mer å vedlikeholde.
• Overlappende grenser: hvis du bruker både min-width og max-width, pass på at de ikke overlapper på samme piksel. Range-syntaksen fjerner dette problemet.
• Teste bare på egen skjerm: det som ser bra ut på din laptop, kan være ødelagt på en liten telefon eller en stor 4K-skjerm.

Slik tester du det responsive designet

Du trenger ikke et skap fullt av enheter for å teste. De innebygde utviklerverktøyene i Chrome, Firefox, Edge og Safari har en «device mode» (ofte et ikon av en mobil og et nettbrett) der du kan simulere ulike skjermstørrelser og pikseltettheter. Den enkleste testen er likevel å dra nettleservinduet smalere og bredere og se hvor layouten brekker – nettopp der hører et brytepunkt hjemme.

Vil du gå dypere, kan du kombinere dette med grunnleggende CSS-ferdigheter som å justere farge og størrelse på tekst med CSS, legge på typografi via Google Fonts, eller eksperimentere med nyttige CSS-koder som gir designet litt ekstra. Jo tryggere du er på grunnleggende CSS, desto enklere er det å bygge responsive sider som holder på alle skjermstørrelser.

Vanlige spørsmål (FAQ)

Hva er forskjellen på min-width og min-device-width?

min-width ser på bredden til nettleservinduet (viewporten) og endrer seg når brukeren endrer vindusstørrelse eller zoomer. min-device-width ser på den fysiske skjermstørrelsen og reagerer ikke på slike endringer. device-width-variantene er avleggs i CSS-spesifikasjonen, så du bør alltid bruke min-width og max-width.

Hvilke brytepunkter bør jeg bruke i 2026?

Det finnes ingen fasit, men vanlige, godt utprøvde verdier ligger rundt 576–640px (stor mobil), 768px (nettbrett), 992–1024px (liten laptop), 1200–1280px (desktop) og 1400–1536px (store skjermer). Velg likevel punktene etter hvor innholdet ditt faktisk ser dårlig ut, ikke etter bestemte enheter.

Trenger jeg fortsatt media queries når det finnes container queries?

Ja. Media queries styrer helheten ut fra skjermstørrelsen, mens container queries lar enkeltkomponenter tilpasse seg beholderen sin. De løser ulike oppgaver og brukes best sammen – media queries for sidens overordnede layout og container queries for gjenbrukbare komponenter.

Hvorfor virker ikke media queries på mobilen min?

Den klart vanligste årsaken er at viewport-metataggen mangler i <head>. Uten <meta name="viewport" content="width=device-width, initial-scale=1"> rapporterer mobilnettleseren feil bredde, og dermed slår ikke min-width-queriene inn slik du forventer.

Bør jeg bruke px eller em/rem i media queries?

Begge fungerer, men em og rem har en fordel: brytepunktene skalerer når brukeren øker standard skriftstørrelse i nettleseren, noe som er bedre for universell utforming. Mange utviklere bruker derfor em i media queries. Piksler er fullt brukbart hvis du foretrekker enklere tall.