Next.js 15-fullstackwebapps · Lektion

Responsivt design og dark mode

Byg layouts, der tilpasser sig enhver skærm med mobile-first-breakpoints, og tilføj en gennemarbejdet dark mode, der tager hensyn til brugeren, med CSS-variabler og Tailwind.

Lektion 4 af 413 trin

Responsivt design og dark mode er en gratis Next.js 15-fullstackwebapps-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Next.js 15-fullstackwebapps, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Next.js 15-fullstackwebapps-kurset indeholder 4 lektioner i alt.

Tænk mobile-first

Responsivt design betyder ét layout, der tilpasser sig telefoner, tablets og computere. Den moderne tilgang er mobile-first: Stil først den lille skærm, og tilføj derefter forbedringer til større skærme.

Medieforespørgsler

CSS-reglen @media anvender kun typografier over eller under en bestemt bredde. Mobile-first bruger brudpunkter med min-width.

.grid { display: block; }
@media (min-width: 768px) {
  .grid { display: grid; grid-template-columns: 1fr 1fr; }
}

Flydende enheder

Foretræk relative enheder, så layout skalerer naturligt:

rem til afstande og skriftstørrelse
% og fr til bredder
clamp() til flydende typografi

h1 { font-size: clamp(1.5rem, 4vw, 3rem); }

Tailwind-brudpunkter

Tailwind gør responsivitet mulig direkte i koden med præfikser som sm:, md: og lg:. Klasser uden præfiks er grundlaget for mobilvisningen.

<div class="block md:grid md:grid-cols-2 lg:grid-cols-3">

Flexbox og Grid

To layoutmotorer dækker næsten alle behov:

Flexbox til endimensionelle rækker eller kolonner
Grid til todimensionelle layout

Kombinér dem, og lad brudpunkterne ombryde indholdet.

Hvad er mørk tilstand?

Mørk tilstand udskifter en lys farvepalet med en mørk for at mindske belastningen af øjnene og spare batteri på OLED-skærme. En god implementering respekterer brugerens systemindstilling og giver mulighed for at tilsidesætte den.

Systemindstilling

CSS-mediefunktionen prefers-color-scheme registrerer operativsystemets tema, så du som standard kan bruge det, brugeren allerede har valgt.

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

CSS-variabler til temaer

Definér farver som brugerdefinerede CSS-egenskaber på rodelementet, og tilsidesæt dem derefter i mørk tilstand. Komponenter refererer til variablerne, så et enkelt skift ændrer hele appens udseende.

:root { --bg: #fff; --fg: #111; }
[data-theme='dark'] { --bg: #111; --fg: #eee; }
body { background: var(--bg); color: var(--fg); }

Tailwinds mørke variant

Tailwind leveres med varianten dark:. Slå en dark-klasse til på html-elementet, så aktiveres de mørke hjælpeklasser.

<div class="bg-white text-black dark:bg-gray-900 dark:text-white">

Bevaring af valget

Gem brugerens valg i localStorage, og anvend det før visningen tegnes, så du undgår et kort glimt af det forkerte tema. Biblioteker som next-themes håndterer dette problemfrit i Next.js.

const theme = localStorage.getItem('theme') || 'system';
document.documentElement.dataset.theme = theme;

Tilgængelighed og kontrast

Uanset temaet skal teksten være let at læse. Sigt efter et kontrastforhold på mindst 4.5:1 for brødtekst i henhold til WCAG. Test begge temaer; en farve, der fungerer på hvid, kan være uegnet på mørk baggrund.

Hurtig kontrol

Test din viden om responsivitet og temaer.

Besvar den i den interaktive lektion

Opsummering

Du har lært at tilpasse typografien:

Mobile-first-medieforespørgsler og flydende enheder tilpasser layout
Tailwinds præfikser md:/lg: gør brudpunkter direkte i koden
CSS-variabler sammen med prefers-color-scheme driver mørk tilstand
Gem valget, og sørg for tilgængelig kontrast i begge temaer

Gratis at komme i gang

Lær TypeScript 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: 12
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Responsivt design og dark mode” gratis?

Ja — alle 3 lektioner i læringssporet Next.js 15-fullstackwebapps, inklusive “Responsivt design og dark mode”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Next.js 15-fullstackwebapps-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Responsivt design og dark mode”?

Byg layouts, der tilpasser sig enhver skærm med mobile-first-breakpoints, og tilføj en gennemarbejdet dark mode, der tager hensyn til brugeren, med CSS-variabler og Tailwind. Du øver dig i Next.js 15-fullstackwebapps 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å Next.js 15-fullstackwebapps?

Der kræves ingen tidligere erfaring. Next.js 15-fullstackwebapps 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 “Responsivt design og dark mode”?

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 Next.js 15-fullstackwebapps-lektion?

Ja. Alle Next.js 15-fullstackwebapps-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

← Tilbage til Next.js 15-fullstackwebapps