Media queries og mobile-first-udvikling
Skriv brudpunkter med min-width-medieforespørgsler, byg mobil-layoutet først, og udvid det gradvist til større skærme.
Media queries og mobile-first-udvikling er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 4 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 Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad er medieforespørgsler?
Medieforespørgsler anvender kun CSS-regler, når bestemte betingelser er opfyldt — for eksempel når visningsområdets bredde er over en tærskel. De er grundlaget for responsivt design og lader ét stilark tilpasse sig enhver skærmstørrelse.
Grundlæggende syntaks
En medieforespørgsel omslutter en blok CSS i en @media-regel. Reglerne indeni anvendes kun, når betingelsen matcher.
@media (min-width: 768px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}min-width kontra max-width
min-width: anvend typografier, når visningsområdet er mindst så bredt (mobil-først). max-width: anvend typografier, når visningsområdet er højst så bredt (desktop-først). Foretræk min-width til mobil-først-udvikling.
/* Mobile-first (preferred): */
@media (min-width: 768px) { /* tablets and up */ }
@media (min-width: 1024px) { /* desktops and up */ }
/* Desktop-first: */
@media (max-width: 767px) { /* phones only */ }Mobil-først-fremgangsmåden
Skriv først CSS til små skærme (uden for alle medieforespørgsler). Brug derefter min-width-medieforespørgsler til gradvist at tilføje kompleksitet til større skærme. Det giver mindre CSS til mobilbrugere og generelt renere kode.
.card {
/* Mobile defaults: single column */
padding: 16px;
font-size: 0.9rem;
}
@media (min-width: 768px) {
.card {
/* Tablet enhancement */
padding: 24px;
font-size: 1rem;
}
}Almindelige brudpunkter
Vælg brudpunkter ud fra dit indhold, ikke bestemte enheder. Populære udgangspunkter er: 480px (store telefoner), 768px (tablets), 1024px (små desktopskærme), 1280px (store desktopskærme). Undgå brudpunkter, der målrettes bestemte enhedsmodeller.
Medietyper
Ud over skærmbredden kan du målrette medietyper: screen til skærme og print til printere. Medieforespørgsler til udskrift lader dig tilpasse, hvordan en side ser ud, når den udskrives (skjul navigation, juster farver).
@media print {
nav, footer, .ads {
display: none;
}
body {
font-size: 12pt;
color: black;
}
}Kombinér betingelser med and
Kæd betingelser sammen med and: Anvend kun typografier, når begge betingelser er sande. Brug not og or til mere kompleks logik.
@media (min-width: 768px) and (max-width: 1023px) {
/* tablets only */
}
@media (orientation: landscape) and (max-width: 767px) {
/* landscape phones */
}prefers-color-scheme
Reagér på brugerens præference for mørk tilstand i operativsystemet. Tilbyd som standard et mørkt tema uden en til/fra-knap.
@media (prefers-color-scheme: dark) {
body {
background: #1a202c;
color: #f7fafc;
}
}prefers-reduced-motion
Tag hensyn til brugere, der foretrækker mindre bevægelse (vestibulære forstyrrelser, epilepsi). Deaktivér eller forenkl animationer i denne medieforespørgsel.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Containerforespørgsler — fremtiden
Containerforespørgsler (@container) anvender typografier baseret på størrelsen af en overordnet container i stedet for visningsområdet. De muliggør ægte responsivitet på komponentniveau og har været tilgængelige i alle moderne browsere siden 2023.
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card { flex-direction: row; }
}Logiske egenskaber til RTL-understøttelse
Brug logiske egenskaber som margin-inline-start i stedet for margin-left til layout, der fungerer på sprog, der skrives både venstre mod højre og højre mod venstre. Fremtidssikr dine responsive layout.
Hurtigt tjek
Hvilken tilgang definerer CSS-strategien mobil-først korrekt?
Opsummering: Medieforespørgsler og mobil-først
@media (min-width: N) til progressiv forbedring med mobil-først. Skriv grundstile til mobilen uden forespørgsler. Tilføj kompleksitet til større skærme. prefers-color-scheme til mørk tilstand. prefers-reduced-motion til tilgængelighed. Containerforespørgsler til responsivitet på komponentniveau.
Lær HTML 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
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Media queries og mobile-first-udvikling” gratis?
Ja — hele teksten til “Media queries og mobile-first-udvikling” 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 Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Media queries og mobile-first-udvikling”?
Skriv brudpunkter med min-width-medieforespørgsler, byg mobil-layoutet først, og udvid det gradvist til større skærme. Du øver dig i Frontend 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å Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend 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 4 af 4.
Hvor lang tid tager lektionen “Media queries og mobile-first-udvikling”?
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 Frontend Academy-lektion?
Ja. Alle Frontend 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
- Viewport-meta-tagget
- Flexbox til layout
- CSS Grid til layout
- Media queries og mobile-first-udvikling