Slik bruker du media queries i CSS uten å miste kontrollen på designet

Nettsider blir brukt på alt fra små mobiler til store skjermer på kontoret. Uten et bevisst forhold til media queries i CSS, er det fort gjort at designet bare “funker greit nok” i stedet for å faktisk være godt tilpasset brukeren.

I denne artikkelen får du en ryddig innføring i hvordan media queries fungerer, hvordan du velger gode breakpoint, og hvordan du unngår kaotiske stilark som er vanskelige å endre senere.

Hva er en media query, egentlig?

En media query er en betingelse i CSS som sier “bruk disse stilene når skjermen oppfører seg sånn”. Oftest handler det om bredde, men du kan også teste høyde, retning (portrait/landscape) og mer.

Den enkleste varianten ser slik ut:

@media (min-width: 768px) { … }betyr: bruk disse stilene når vinduet er minst 768 piksler bredt. Dette gjør at du kan bygge opp et grunnleggende design først, og deretter gradvis forbedre det for større skjermer.

Mobile first: start med det minste, bygg oppover

En vanlig anbefaling er å jobbe “mobile first”. Det betyr at standard CSS gjelder for små skjermer, og at du legger til media queries for bredere skjermer medmin-widthi stedet for å prøve å presse alt ned fra desktop.

Strukturen kan se slik ut:

• Grunnstil: fungerer på mobil
• @media (min-width: 600px): juster for små nettbrett
• @media (min-width: 900px): tilpass for laptop
• @media (min-width: 1200px): forbedre for store skjermer

Fordelen er at du tvinges til å prioritere det viktigste innholdet først. Du slipper også mye “overstyring av overstyringer”, siden større skjermer bare får ekstra regler, ikke helt nye og motstridende varianter.

Hvordan velge fornuftige breakpoint

Et vanlig problem er at utviklere velger breakpoint ut fra populære enheter, som 768px for iPad eller 1440px for desktop. Enheter endrer seg, men innholdet ditt består. Tenk derfor pålayouti stedet formodell.

En enkel metode er å dra nettleservinduet sakte innover og utover mens du ser på designet. Når noe begynner å se trangt, altfor bredt eller rotete ut, er det et naturlig sted for et breakpoint.

Du kan notere ned noen få nøkkelpunkter, for eksempel:

• Tekstlinjer blir for brede til å være komfortable å lese
• Kortene i et kortgrid får for lite eller for mye luft
• Navigasjonen blir vanskelig å bruke

Bruk bredden du faktisk oppdager i inspeksjonsverktøyet, og rund den til et ryddig tall, for eksempel 640 i stedet for 637.

Enkle kodeeksempler du kan bygge videre på

La oss si at du har en enkel layout med et innholdsområde og en sidebar. På mobil vil du ha alt i én kolonne, på større skjermer to kolonner.

Et grunnoppsett kan se slik ut:

main {
  display: block;
}
aside {
  margin-top: 1.5rem;
}

For skjermer som er brede nok til to kolonner, legger du til:

@media (min-width: 900px) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
  }
  aside {
    margin-top: 0;
  }
}

Legg merke til at vi ikke endrer alt, men kun det som faktisk må være forskjellig på større skjermer.

Hold styr på media queries i større prosjekter

Selv en enkel løsning kan bli uoversiktlig når CSS-filen vokser. Et vanlig problem er spredte og nesten like breakpoint som er vanskelige å rydde i senere.

Du kan gjøre livet enklere ved å ta noen valg tidlig:

• Bruk et lite sett med faste breakpoint, for eksempel 480, 768, 1024 og 1280
• Hold deg til entenmin-widthellermax-width, ikke bland uten grunn
• Grupper relaterte media queries nær komponenten de hører til

Hvis du bruker preprosessorer eller nyere CSS-muligheter, kan du samle breakpoint som variabler. Hvis ikke, kan du i det minste dokumentere dem øverst i CSS-filen med kommentarer, slik at alle på prosjektet forstår logikken.

Vanlige feil som gjør responsivt design tungt å vedlikeholde

Noen feil går igjen, spesielt hos nybegynnere eller i prosjekter som har vokst fort uten plan. Heldigvis er de enkle å kjenne igjen og rette opp i.

• For mange små justeringer:Hvis du trenger nye breakpoint for hver 30. piksel, er ofte grunnlayouten for komplisert.
• Overstyring i flere lag:Hvis du ender opp med ulike varianter av samme regel i mange media queries, bør du forenkle strukturen.
• Pikselfiksering:Hardt kodede høyder, bredder og marginer som bare “passer akkurat” på én skjerm, gjør det vanskelig å tilpasse for andre.

En nyttig tommelfingerregel er å starte med fleksible enheter som prosent, rem og fraksjoner i grid, og heller justere med media queries når layouten virkelig trenger det.

Test mer enn bare bredde: orientering og preferanser

Skjermbredde er viktig, men ikke det eneste som påvirker opplevelsen. CSS lar deg også tilpasse ut fra retning og brukerpreferanser, uten å måtte bruke JavaScript.

Noen eksempler er:

• @media (orientation: landscape)for å finjustere design i liggende modus
• @media (prefers-reduced-motion: reduce)for å tone ned animasjoner
• @media (prefers-color-scheme: dark)for å støtte mørkt tema

Slike små justeringer kan gjøre siden roligere for brukere som blir slitne av mye bevegelse, og mer behagelig i mørke omgivelser. Husk at preferanser kan variere, så tilby et fornuftig standarddesign først.

Slik kommer du i gang på ditt eget prosjekt

Hvis du allerede har en side som ikke skalerer så godt, trenger du ikke rive alt. Start med én side eller én komponent, og gå gjennom breddene trinn for trinn. Noter når layouten slutter å fungere, og legg inn et begrenset antall målrettede media queries.

Lag deg gjerne en liten sjekkliste for hver layout: lesbarhet, navigasjon, interaktive elementer og luft (spacing). Når du er bevisst på hva du vurderer, er det lettere å argumentere for valg du gjør, og enklere å vedlikeholde designet senere.