CSS Academy · Lektion

Syntaks og almindelige breakpoints

Lær syntaksen for media queries og de standard-breakpoints, der bruges i moderne webdesign.

Lektion 1 af 413 trin

Syntaks og almindelige breakpoints er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.

Syntaks for mediaforespørgsler

En mediaforespørgsel omslutter CSS-regler og anvender dem kun, når en betingelse er sand. Den grundlæggende syntaks:

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

Medietyper

De mest almindelige medietyper:

all — gælder for alle outputenheder (standard)
screen — computer- og telefonskærme
print — til udskriftsvisning og udskrivning
speech — skærmlæsere

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

Mediefunktioner

Mediefunktioner beskriver egenskaber ved enheden eller viewporten. Almindelige funktioner: width, height, orientation, resolution, prefers-color-scheme, hover.

Forespørgsler med min-width

Den mest anvendte funktion – retter sig mod skærme ved eller over en bestemt bredde. En mobile-first-tilgang.

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

Almindelige brudpunkter

Der findes ingen universelt korrekte brudpunkter. Et populært sæt baseret på almindelige enhedsbredder:

480px — store telefoner
768px — tablets
1024px — små desktopskærme, tablets i landskabstilstand
1280px — almindelige desktopskærme
1536px — store desktopskærme

Indholdsbaserede brudpunkter

I stedet for brudpunkter baseret på enheder vælger moderne praksis brudpunkter, hvor indholdet bryder sammen. Design ved én størrelse, tilpas størrelsen, og tilføj et brudpunkt, når layoutet begynder at se dårligt ud.

Intervalsyntaks (moderne)

Moderne CSS understøtter intervalsyntaks i mediaforespørgsler – den er mere læsbar end en kombination af min og max:

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

Kombination med and

Brug and til at kræve flere betingelser samtidig:

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

Negation med not

Brug not til at negere en mediaforespørgsel. Gælder for alt, der IKKE matcher forespørgslen:

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

Flere forespørgsler med ,

Adskil flere forespørgsler med kommaer – ligesom en liste af selektorer. Typografierne anvendes, hvis EN HVILKEN SOM HELST forespørgsel matcher.

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

Em-baserede brudpunkter

Brug af em-enheder til brudpunkter i stedet for px får dem til at skalere med brugerens indstilling for skriftstørrelse i browseren, hvilket forbedrer tilgængeligheden.

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

Hurtigt tjek

Hvilken mediaforespørgsel matcher skærme, der er mindst 1024px brede?

Besvar den i den interaktive lektion

Opsummering

Mediaforespørgsler anvender CSS betinget ud fra egenskaber ved enheden eller viewporten. Brug min-width til mobile-first og max-width til desktop-first. Placer brudpunkter dér, hvor indholdet har brug for dem, ikke ved vilkårlige enhedsstørrelser. Moderne intervalsyntaks forbedrer læsbarheden.

Gratis at komme i gang

Lær CSS med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 40
Lektioner: 159

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Syntaks og almindelige breakpoints” gratis?

Ja — hele teksten til “Syntaks og almindelige breakpoints” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Syntaks og almindelige breakpoints”?

Lær syntaksen for media queries og de standard-breakpoints, der bruges i moderne webdesign. Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på CSS Academy?

Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Syntaks og almindelige breakpoints”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne CSS Academy-lektion?

Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Syntaks og almindelige breakpoints
Forespørgsler efter bredde, højde og orientering
Prefers-Color-Scheme og Prefers-Reduced-Motion
Kombination af flere media queries

← Tilbage til CSS Academy