CSS Academy · leksjon

Syntaks og vanlige bruddpunkter

Lær syntaksen for media queries og standardbruddpunktene som brukes i moderne webdesign.

Leksjon 1 av 413 trinn

Syntaks og vanlige bruddpunkter er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Syntaks for mediespørringer

En mediespørring omslutter CSS-regler og bruker dem bare når en betingelse er sann. Den grunnleggende syntaksen:

<div class="box">Media query syntax demo</div>

Medietyper

De vanligste medietypene:

all — gjelder alle utdataenheter (standard)
screen — datamaskin- og telefonskjermer
print — for forhåndsvisning og utskrift
speech — skjermlesere

<div class="layout">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>

Mediefunksjoner

Mediefunksjoner beskriver egenskaper ved enheten eller visningsområdet. Vanlige funksjoner er: width, height, orientation, resolution, prefers-color-scheme og hover.

min-width-mediespørringer

Den mest brukte funksjonen – retter seg mot skjermer som er lik eller bredere enn en angitt grense. En mobile-first-tilnærming.

<div class="box">Breakpoint ladder</div>

Vanlige bruddpunkter

Det finnes ingen universelt riktige bruddpunkter. Et populært sett basert på vanlige enhetsbredder:

480px — store telefoner
768px — nettbrett
1024px — små stasjonære skjermer og nettbrett i liggende format
1280px — standard stasjonære skjermer
1536px — store stasjonære skjermer

Innholdsbaserte bruddpunkter

I stedet for bruddpunkter basert på enheter setter moderne praksis bruddpunktene der innholdet bryter sammen. Utform ved én størrelse, endre størrelsen, og legg til et bruddpunkt når oppsettet begynner å se dårlig ut.

Områdesyntaks (moderne)

Moderne CSS støtter områdesyntaks i mediespørringer – den er mer lesbar enn å kombinere min og max:

<div class="panel">Range syntax demo</div>

Kombinere med and

Bruk and for å kreve at flere betingelser er oppfylt samtidig:

<div class="sidebar">Sidebar</div>

Negere med not

Bruk not for å negere en mediespørring. Gjelder alt som IKKE samsvarer med spørringen:

<div class="doc">Not-screen demo (affects print/speech only)</div>

Flere spørringer med ,

Skill flere spørringer med komma – på samme måte som en liste med selektorer. Stilene brukes hvis EN av spørringene samsvarer.

<div class="page">
    Multiple queries with comma
    <div class="nav-drawer">Nav drawer (hidden on wide screens or print)</div>
  </div>

Em-baserte bruddpunkter

Bruk av em-enheter for bruddpunkter (i stedet for px) gjør at de skaleres med brukerens innstilling for nettleserens skriftstørrelse, noe som forbedrer tilgjengeligheten.

<div class="box">Em-based breakpoints</div>

Hurtigsjekk

Hvilken mediespørring samsvarer med skjermer som er minst 1024px brede?

Besvar den i den interaktive leksjonen

Oppsummering

Mediespørringer bruker CSS-betingelser basert på egenskaper ved enheten eller visningsområdet. Bruk min-width for mobile-first og max-width for desktop-first. Sett bruddpunkter der innholdet trenger det, ikke ved vilkårlige enhetsstørrelser. Moderne områdesyntaks gjør koden mer lesbar.

Gratis å komme i gang

Lær deg CSS med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 40
Leksjoner: 159

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Syntaks og vanlige bruddpunkter» gratis?

Ja – hele teksten i «Syntaks og vanlige bruddpunkter» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Syntaks og vanlige bruddpunkter»?

Lær syntaksen for media queries og standardbruddpunktene som brukes i moderne webdesign. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med CSS Academy?

Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Syntaks og vanlige bruddpunkter»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?

Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Syntaks og vanlige bruddpunkter
Bredde-, høyde- og orienteringsforespørsler
Prefers-Color-Scheme og Prefers-Reduced-Motion
Kombinere flere media queries

← Tilbake til CSS Academy