Gør den responsiv
Få den til at se godt ud på telefon og desktop.
Gør den responsiv er en gratis Vibe-programmering-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 Vibe-programmering, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vibe-programmering-kurset indeholder 4 lektioner i alt.
Ét design på alle skærme
Dine brugere er på telefoner, tablets og bærbare computere. Et design, der ser fantastisk ud på din store skærm, kan blive rodet og ødelagt på en telefon. Responsivt design betyder, at designet tilpasser sig elegant til alle skærmstørrelser.
Den gode nyhed er, at du kan gøre det responsivt udelukkende med prompts. I denne lektion lærer du, hvordan du beder om det — og hvordan du opdager og løser layoutproblemer på små skærme.
Tænk mobile-first
Den moderne bedste praksis er mobile-first: design først til den lille skærm, og udvid derefter til større skærme. Telefoner tvinger dig til at prioritere det, der virkelig betyder noget.
Bed AI om at begynde mobile-first, så bygger den layouts, der skalerer pænt op i stedet for at mase et desktopdesign ned på en telefon.
"Build this landing page mobile-first. Design it to look great on
a phone first — single column, large tap targets — then expand to
a multi-column layout on tablets and desktops."Breakpoints: Her ændres layoutet
Et breakpoint er en skærmbredde, hvor dit layout ændres — for eksempel når et gitter med tre kolonner bliver til én kolonne på telefoner. Almindelige breakpoints er cirka telefon (under 640px), tablet (768px) og computer (1024px+).
Du kan beskrive dem med almindelige ord; AI oversætter dem til de rigtige Tailwind-størrelser.
"Make the feature grid responsive: 3 columns on desktop,
2 columns on tablet, and 1 column on mobile. Stack them with
comfortable spacing on small screens."Sådan markerer Tailwind breakpoints
I koden bruger Tailwind præfikser som md: og lg: til at anvende typografi og layout ved bestemte bredder. grid-cols-1 md:grid-cols-2 lg:grid-cols-3 betyder: én kolonne som standard, to på mellemstore skærme og tre på store.
Du kommer ikke til at skrive meget af dette i hånden, men det hjælper dig med at give præcis feedback, hvis du kan genkende det.
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- cards stack on mobile, spread out on desktop -->
</div>Den sammenklappelige navigationslinje
Navigation er den klassiske udfordring ved responsivt design. En række links, der passer på en computer, kan ikke være på en telefon. Standardløsningen er at samle dem i en hamburgermenu på små skærme.
Bed udtrykkeligt om det, så håndterer AI også skiftefunktionen.
"Make the navbar responsive: show the full row of links on desktop,
but on mobile collapse them into a hamburger menu that opens a
slide-down panel when tapped."Simulering af en breakpoint-beslutning
At vælge et layout handler i virkeligheden bare om at tjekke skærmbredden og vælge et antal kolonner. Her er en lille JavaScript-model af den logik — kør den for at se, hvordan forskellige bredder passer til forskellige layouts.
function columnsFor(width) {
if (width < 640) return 1; // phone
if (width < 1024) return 2; // tablet
return 3; // desktop
}
[375, 800, 1440].forEach(function (w) {
console.log(w + 'px screen -> ' + columnsFor(w) + ' column(s)');
});Flydende størrelser, ikke faste
Faste bredder som width: 600px går i stykker på små skærme. Responsive designs bruger relative enheder — procentdele, max-width og fleksible gitre — så elementer bliver mindre og større sammen med skærmen.
Hvis noget løber ud over kanten på en mobil, skyldes det som regel en fast bredde. Bed bare AI om at gøre det flydende.
"Some elements overflow off the right edge on mobile. Replace any
fixed pixel widths with fluid, percentage-based or max-width sizing
so nothing spills past the screen edge."Trykvenlige mål
Fingre er større end musemarkører. Knapper og links, der fungerer på en computer, kan være for små og ligge for tæt på hinanden på en telefon. Tommelfingerreglen er trykmål på mindst cirka 44px i højden med tilstrækkelig afstand.
Bed AI om at gøre interaktive elementer trykvenlige, så oplevelsen bliver velegnet til mobil.
"On mobile, make all buttons and links touch-friendly: at least
44px tall, with enough spacing between them so they're easy to tap
without hitting the wrong one."Forhåndsvisning i forskellige størrelser
Værktøjer som v0, Lovable og Bolt lader dig forhåndsvise din brugerflade i telefon-, tablet- og computerbredder. Tjek altid alle tre, før du er tilfreds.
I en browser kan du også åbne DevTools (F12) og bruge enhedsværktøjslinjen til at teste størrelser. At se breakpointene i praksis er den hurtigste måde at opdage problemer på.
Quick test checklist:
- Does anything overflow horizontally on a phone?
- Do columns collapse sensibly?
- Is the navbar a hamburger on mobile?
- Are buttons big enough to tap?
- Is text readable without zooming?Løsning af responsive fejl med prompts
Når du opdager et problem ved en bestemt skærmstørrelse, skal du beskrive det præcist: hvilken skærm, hvilket element og hvad der er galt. Præcise fejlrapporter giver præcise løsninger.
Behandl AI som en udvikler, du afleverer en kvalitetssikringsnote til.
"On mobile (under 640px), the hero headline is cut off and the
two buttons sit side by side and overflow. Fix it: shrink the
headline to fit, and stack the buttons vertically full-width."Øvelse: Få en side til at tilpasse sig
Tag en side, du har bygget, og kør den gennem den responsive arbejdsgang: bed om mobile-first, indstil breakpoints for gitteret, klap navigationslinjen sammen, forhåndsvis derefter i alle tre størrelser, og løs alt, der går i stykker. Responsivitet er en vane — byg den ind i alle dine prompts til brugerflader fremover.
"Make my whole dashboard fully responsive: sidebar collapses to a
bottom tab bar on mobile, stat cards go from 4 columns to 1, charts
scale to fit, and all controls are touch-friendly. Then show me the
mobile, tablet, and desktop previews."Hurtig kontrol
Hvad gør et breakpoint i et responsivt design?
Opsummering: Godt på alle enheder
Du har lært at få designs til at tilpasse sig alle skærme med prompts: begynd mobile-first, indstil breakpoints for gitre og navigationslinjer, brug flydende størrelser i stedet for faste bredder, og gør trykmål trykvenlige. Forhåndsvis altid på telefon, tablet og computer, og rapportér responsive fejl præcist.
Det afslutter Design af brugerflader med prompts — du kan nu beskrive, generere, style, tematisere og gøre alle brugerflader responsive ved kun at bruge ord og værktøjer som v0 og Lovable. Gå i gang med at bygge noget smukt.
Lær JavaScript 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
- 25
- Lektioner
- 100
Ofte stillede spørgsmål
Er lektionen “Gør den responsiv” gratis?
Ja — alle 3 lektioner i læringssporet Vibe-programmering, inklusive “Gør den responsiv”, 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. Vibe-programmering-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Gør den responsiv”?
Få den til at se godt ud på telefon og desktop. Du øver dig i Vibe-programmering 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å Vibe-programmering?
Der kræves ingen tidligere erfaring. Vibe-programmering 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 “Gør den responsiv”?
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 Vibe-programmering-lektion?
Ja. Alle Vibe-programmering-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.