24/02/2023
I en verden, hvor internetadgang sker fra et utal af enheder – fra lommestørrelse smartphones og tablets til store skrivebordsmonitorer og endda smarte ure – er det afgørende, at websites kan tilpasse sig problemfrit. Dette er kernen i responsivt design, og den mest kraftfulde værktøj i denne disciplin er medieforespørgsler. Forestil dig, at dit website er en kamæleon, der skifter farve for at matche omgivelserne; medieforespørgsler er den mekanisme, der gør denne tilpasning mulig, hvilket sikrer en optimal brugeroplevelse uanset skærmstørrelse, opløsning eller endda brugerens personlige præferencer.
Medieforespørgsler er en CSS3-funktion, der giver dig mulighed for at anvende forskellige stilarter baseret på enhedens egenskaber. Det handler ikke kun om bredden af skærmen; det omfatter også orientering (stående eller liggende), opløsning, farveegenskaber og endda brugerens indstillinger for tilgængelighed. Ved at udnytte medieforespørgsler kan webudviklere skræddersy layouts, typografi, billedstørrelser og endda interaktionselementer for at skabe en flydende og intuitiv brugeroplevelse på tværs af et uendeligt spektrum af enheder.
- Hvor bruges medieforespørgsler?
- Anatomien af en Medieforespørgsel
- Har du virkelig brug for medieforespørgsler?
- Tilgængelighed i Fokus
- Hvad ligger forude?
- Container-forespørgsler: Fremtiden for komponentbaseret design
- Eksempler i praksis
- Ofte Stillede Spørgsmål om Medieforespørgsler
- 1. Hvad er forskellen på min-width og max-width i medieforespørgsler?
- 2. Hvorfor er det vigtigt at tænke på tilgængelighed med medieforespørgsler?
- 3. Kan jeg bruge JavaScript til at detektere medieforespørgsler?
- 4. Er container-forespørgsler en erstatning for medieforespørgsler?
- 5. Hvordan kan jeg undgå at skabe en alt for kompleks CSS-kodebase med medieforespørgsler?
Hvor bruges medieforespørgsler?
Medieforespørgsler er mest almindeligt forbundet med CSS, men deres anvendelighed strækker sig også til HTML og JavaScript, hvilket giver en robust kontrol over, hvordan indhold præsenteres og interageres med på tværs af forskellige kontekster.
I CSS
CSS er utvivlsomt det mest almindelige sted at finde medieforespørgsler i brug. De placeres direkte i stylesheetet inden for en @media-regel, som omslutter de stilarter, der skal anvendes, når specifikke betingelser er opfyldt. Dette giver dig mulighed for at definere et sæt regler, der kun aktiveres, når browseren matcher de definerede egenskaber.
/* Når browseren er mindst 600px bred */ @media screen and (min-width: 600px) { .element { /* Anvend nogle stilarter her */ background-color: lightblue; font-size: 1.2em; } } /* Visningsporte mellem 320px og 480px brede */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { .kort { background: #bada55; padding: 15px; } }Selvom det er teknisk muligt at anvende @import-reglen med medieforespørgsler, anbefales det generelt at undgå denne metode på grund af dens negative indvirkning på ydeevnen. Det er bedre at samle dine CSS-regler i færre filer eller bruge <link>-elementet i HTML.
I HTML
Medieforespørgsler kan også integreres direkte i HTML-dokumentet, hvilket giver en tidlig mulighed for at optimere ressourceindlæsning. Dette gøres primært via <link>-elementet i dokumentets <head>, hvor du kan specificere forskellige stylesheets til forskellige viewport-størrelser eller medietype. Dette kan forbedre ydeevnen ved at sikre, at kun de nødvendige stilarter downloades af den pågældende enhed.
<head> <!-- Serveres til alle brugere --> <link rel="stylesheet" href="all.css" media="all" /> <!-- Serveres til skærme, der er mindst 20em brede --> <link rel="stylesheet" href="small.css" media="(min-width: 20em)" /> <!-- Serveres til printmedier, som printere --> <link rel="stylesheet" href="print.css" media="print" /> </head>En anden vigtig anvendelse i HTML er med <source>-elementet inden for et <picture>-element, som bruges til responsive billeder. Dette giver dig mulighed for at servere forskellige billedversioner baseret på skærmstørrelse, hvilket optimerer indlæsningstider og databrug, især på mobile enheder.
<picture> <!-- Brug dette billede, hvis skærmen er mindst 800px bred --> <source srcset="kat-landskab.png" media="(min-width: 800px)"> <!-- Brug dette billede, hvis skærmen er mindst 600px bred --> <source srcset="kat-beskåret.png" media="(min-width: 600px)"> <!-- Brug dette billede, hvis intet matcher --> <img src="kat.png" alt="En trefarvet kat med mørke pilotbriller." </picture>Du kan også bruge medieforespørgsler direkte på <style>-elementet:
<style> p { background-color: blue; color: white; } </style> <style media="all and (max-width: 500px)"> p { background-color: yellow; color: blue; } </style>I JavaScript
Medieforespørgsler kan også udnyttes i JavaScript ved hjælp af window.matchMedia()-metoden. Dette er særligt nyttigt, når du har brug for at udløse bestemt JavaScript-funktionalitet baseret på enhedens egenskaber, såsom at ændre interaktiv adfærd eller indlæse yderligere script, når en bestemt skærmstørrelse er nået.
// Opret en medieforespørgsel, der målretter visningsporte på mindst 768px bredde const mediaQuery = window.matchMedia('(min-width: 768px)'); function handleTabletChange(e) { // Tjek om medieforespørgslen er sand if (e.matches) { console.log('Medieforespørgsel matchet!'); } } // Registrer event listener for ændringer mediaQuery.addListener(handleTabletChange); // Udfør et indledende tjek handleTabletChange(mediaQuery);Denne tilgang er mere effektiv end at lytte til window.resize-begivenheden og manuelt tjekke window.innerWidth, da matchMedia() er optimeret til netop dette formål og kun udløses, når de specificerede medieforhold ændrer sig.
Anatomien af en Medieforespørgsel
For at mestre medieforespørgsler er det vigtigt at forstå deres grundlæggende opbygning. En typisk medieforespørgsel består af @media-reglen, en valgfri medietype, en eller flere mediefunktioner og logiske operatører, der kombinerer disse betingelser.
@media [medietype] ([mediefunktion]) { /* Stilarter her! */ }Medietype
Medietypen definerer, hvilken type medie enheden er. Den mest almindelige medietype er screen, men der er også andre, der kan være nyttige:
all: Matcher alle enheder. Dette er standard, hvis ingen medietype er specificeret.print: Matcher dokumenter, der vises i en udskriftsvisning eller ethvert medie, der opdeler indholdet i sider beregnet til udskrivning.screen: Matcher enheder med en skærm (f.eks. smartphones, tablets, computere).speech: Matcher enheder, der læser indholdet højt, f.eks. en skærmlæser.
Ældre mediatyper som tty, tv, projection, handheld, braille, embossed og aural er blevet forældede og bør undgås.
Mediefunktioner
Mediefunktioner er de specifikke egenskaber ved enheden, du ønsker at målrette. Disse kan være alt fra skærmens bredde og højde til enhedens orientering, farvedybde, og endda brugerens præferencer. Medieforespørgsler Level 5 grupperer mediefunktioner i seks hovedkategorier:
1. Visningsport/Side Karakteristika
Disse funktioner beskriver egenskaber ved enhedens visningsport eller den side, indholdet vises på.
| Funktion | Beskrivelse | Værdier |
|---|---|---|
width | Definerer visningsportens bredde. Kan være et specifikt tal eller et område (min-width, max-width). | <længde> |
height | Definerer visningsportens højde. Kan være et specifikt tal eller et område (min-height, max-height). | <længde> |
aspect-ratio | Definerer visningsportens bredde-til-højde-forhold. | <forhold> |
orientation | Enhedens orientering: stående (portrait) eller liggende (landscape). | portrait, landscape |
2. Skærmkvalitet
Disse funktioner relaterer sig til skærmens evne til at vise billeder.
| Funktion | Beskrivelse | Værdier |
|---|---|---|
resolution | Definerer enhedens målpikseldensitet. | <opløsning>, infinite |
update | Hvor ofte enheden kan ændre indholdets udseende (none, slow, fast). | slow, fast, none |
display-mode | Enhedens visningstilstand (fullscreen, standalone, minimal-ui, browser). | fullscreen, standalone, minimal-ui, browser |
3. Farvefunktioner
Disse funktioner beskriver enhedens farveegenskaber.
| Funktion | Beskrivelse | Værdier |
|---|---|---|
color | Definerer enhedens farveunderstøttelse, udtrykt numerisk i bits. | <heltal> |
color-index | Antal farveværdier enheden understøtter. | <heltal> |
monochrome | Antal bits pr. pixel en monokrom enhed understøtter. | <heltal> |
color-gamut | Farvespektrum understøttet af browser og enhed (srgb, p3, rec2020). | srgb, p3, rec2020 |
4. Interaktionsfunktioner
Disse funktioner vedrører brugerens interaktion med enheden.
| Funktion | Beskrivelse | Værdier |
|---|---|---|
pointer | Kontrollerer, om den primære inputmekanisme er en pointer, og hvor præcis den er (coarse, fine, none). | coarse, fine, none |
hover | Kontrollerer, om den primære inputmekanisme tillader brugeren at 'svæve' over elementer (hover, none). | hover, none |
any-pointer | Kontrollerer, om enheden bruger en pointer, og hvor præcis den er. | coarse, fine, none |
any-hover | Kontrollerer, om enheden er i stand til at svæve over elementer. | hover, none |
5. Brugerpræferencer
Disse vigtige funktioner giver dig mulighed for at tilpasse designet baseret på brugerens systemindstillinger, hvilket forbedrer tilgængelighed og komfort.
| Funktion | Beskrivelse | Værdier |
|---|---|---|
prefers-reduced-motion | Detekterer, om brugerens systemindstillinger er sat til at reducere bevægelse på siden. | no-preference, reduce |
prefers-color-scheme | Detekterer, om brugeren foretrækker et lyst eller mørkt farveskema. | light, dark |
prefers-contrast | Detekterer, om brugerens systemindstillinger er sat til at øge eller mindske kontrasten mellem farver. | no-preference, high, low, forced |
inverted-colors | Kontrollerer, om browseren eller operativsystemet er indstillet til at invertere farver. | inverted, none |
prefers-reduced-data | Detekterer, om brugeren foretrækker at bruge mindre data til at gengive siden. | no-preference, reduce |
Operatører
Medieforespørgsler understøtter logiske operatører for at kombinere flere betingelser:
and: Kombinerer flere mediefunktioner. Alle betingelser skal være sande. F.eks.:@media screen and (min-width: 320px) and (max-width: 768px).or(komma-separeret): Matcher, hvis mindst én af betingelserne er sand. F.eks.:@media screen and (prefers-color-scheme: dark), (min-width: 1200px).not: Negerer en hel medieforespørgsel, der matcher enheder, der *ikke* opfylder betingelsen. F.eks.:@media print and (not (color)).
Det er også værd at bemærke, at Medieforespørgsler Level 4 introducerede en enklere syntaks for værdiområder ved hjælp af <, > og = operatører. Så (min-width: 30em) and (max-width: 80em) kan skrives som (30em <= width <= 80em).
Har du virkelig brug for medieforespørgsler?
Medieforespørgsler er et kraftfuldt værktøj i din CSS-værktøjskasse, men det er vigtigt at bruge dem med omhu. Hvis du forsøger at tilpasse dit design til enhver tænkelig situation, kan du ende med en kodebase, der er alt for kompleks at vedligeholde. Som Ranald Mace's koncept om Universal Design foreslår, bør produkter designes til at være brugbare af alle mennesker, i videst muligt omfang, uden behov for tilpasning eller specialiseret design.
På nettet er det næsten utopisk at tale om universelt design, men tænk over det: der er hundredvis af forskellige browsere, tusindvis af kombinationer af brugerpræferencer og titusindvis af unikke Android-enheder alene. Dette betyder, at der er millioner af mulige scenarier, hvor dit indhold kan blive vist.
Det er derfor farligt at antage. Når du designer og udvikler dine produkter, skal du lægge antagelser til side og bruge medieforespørgsler til at sikre, at dit indhold vises korrekt i enhver kontekst og for enhver bruger, men stræb altid efter at skabe et grundlæggende fleksibelt layout, der fungerer godt uden overdreven brug af specifikke medieforespørgsler.
Moderne CSS-funktioner som CSS Grid og Flexbox giver dig mulighed for at skabe layouts, der tilpasser sig visningsportens størrelse uden at kræve medieforespørgsler for hver eneste breakpoint. For eksempel kan en grid-layout tilpasse antallet af kolonner helt uden medieforespørgsler:
.container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }Denne tilgang, ofte kaldet 'content-first' eller 'intrinsic web design', fokuserer på at lade indholdet diktere layoutet snarere end faste skærmstørrelser. Medieforespørgsler bør bruges til de mere specifikke tilpasninger, der ikke kan løses med fleksible layouts alene, såsom brugerpræferencer eller radikalt forskellige layoutstrukturer.
Tilgængelighed i Fokus
Mange af de nyere mediefunktioner i Medieforespørgsler Level 4 og 5 er stærkt centreret omkring tilgængelighed, hvilket giver udviklere mulighed for at skabe mere inkluderende webløsninger, der respekterer brugerens individuelle behov og præferencer. Disse funktioner gør det muligt for din hjemmeside at reagere på indstillinger, som brugere har aktiveret på deres operativsystem eller i deres browser.
prefers-reduced-motion
Denne funktion detekterer, om brugerens systemindstillinger er sat til at reducere bevægelse på siden. Dette er afgørende for personer, der lider af vestibulære lidelser, svimmelhed eller migræne, hvor hurtige animationer kan forårsage ubehag. Ved at respektere denne præference kan du fjerne unødvendige animationer og overgange.
no-preference: Brugeren har ikke angivet nogen præference.reduce: Brugeren foretrækker en grænseflade, der minimerer bevægelse og animation.
En god praksis er at fjerne alle ikke-essentielle animationer, når denne præference er aktiveret:
@media screen and (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }Dette er et simpelt, men utroligt effektivt skridt mod en mere tilgængelig web.
prefers-color-scheme
En af de mest populære tilgængelighedsfunktioner er prefers-color-scheme, som giver dig mulighed for at implementere en 'mørk tilstand' (dark mode) på dit website. Denne funktion detekterer, om brugeren foretrækker et lyst eller mørkt farveskema baseret på deres systemindstillinger.
light: Brugeren foretrækker et lyst tema eller har ingen aktiv præference.dark: Brugeren har valgt en mørk visning i deres indstillinger.
Ved at kombinere dette med CSS-variabler kan du nemt skifte mellem temaer:
body { --bg-color: white; --text-color: black; background-color: var(--bg-color); color: var(--text-color); } @media screen and (prefers-color-scheme: dark) { body { --bg-color: black; --text-color: white; } }Implementering af mørk tilstand handler dog om mere end blot at ændre baggrundsfarven; det kræver en gennemtænkt strategi for at sikre, at alle elementer forbliver læselige og æstetisk tiltalende.
prefers-contrast
Denne funktion informerer om, hvorvidt brugeren har valgt at øge eller reducere kontrasten i deres systempræferencer eller browserindstillinger. Dette er især nyttigt for brugere med nedsat syn, der har brug for højere kontrast for at skelne tekst og elementer.
no-preference: Brugeren har ikke angivet nogen præference.high: Brugeren har valgt et højere kontrastniveau.low: Brugeren har valgt et lavere kontrastniveau.
Selvom browserunderstøttelsen stadig er begrænset, er det en vigtig funktion for fremtidig tilgængelighed.
inverted-colors
inverted-colors detekterer, om brugeren har valgt at invertere farverne på deres system. Dette er en alternativ tilgang til høj kontrast og kan være nyttig for visse synshandicap. Ulempen er, at det også vil invertere farverne på billeder og videoer, hvilket får dem til at ligne røntgenbilleder. Du kan dog modvirke dette med et CSS-filter:
@media (inverted-colors) { img, video { filter: invert(100%); } }I skrivende stund understøttes denne funktion primært af Safari.
Hvad ligger forude?
Medieforespørgsler fortsætter med at udvikle sig, og Medieforespørgsler Level 5 introducerer spændende nye funktioner, der yderligere udvider mulighederne for målretning af skærme og tilpasning af designs til meget specifikke forhold.
forced-colors: Denne funktion detekterer, om en tvungen farvepalet er i brug, hvor browseren begrænser antallet af tilgængelige farver. Dette er ofte en tilgængelighedsindstilling, der hjælper brugere med at definere farvekombinationer og kontraster, der gør indholdet mere behageligt at læse.dynamic-range: Identificerer enheder, der er i stand til superlyse skærme, gengivelse af et bredt farvespektrum og høje kontrastforhold. Dette åbner op for mere visuelt rige oplevelser på kompatible enheder.- Video-præfikserede funktioner: Der er forslag til nye mediefunktioner, der er rettet mod at detektere videokarakteristika, herunder farvespektrum, dynamisk rækkevidde, bredde, højde og opløsning af videoplanen.
Container-forespørgsler: Fremtiden for komponentbaseret design
Mens medieforespørgsler traditionelt har været baseret på browserens visningsport (hele skærmen), er en af de mest spændende udviklinger inden for responsivt design Container-forespørgsler. Forestil dig, at dine komponenter – f.eks. et widget, et kort eller et navigationsmodul – kunne tilpasse sig baseret på *deres egen størrelse* i stedet for hele visningsportens størrelse. Dette er præcis, hvad container-forespørgsler muliggør.
I dag kan et widget, der vises i en sidebar, have en helt anden plads end det samme widget i en fuldbredde-footer. Med traditionelle medieforespørgsler er det svært at style disse uafhængigt uden at oprette mange specifikke klasser. Container-forespørgsler løser dette ved at lade dig definere stilarter baseret på størrelsen af den container, et element er inden i, hvilket gør komponenter langt mere genanvendelige og robuste.
Dette er en game-changer for komponentbaserede arkitekturer og webdesignsystemer, da det giver udviklere mulighed for at bygge komponenter, der er virkelig uafhængige og kontekstbevidste. Chrome 105 og Safari 16.1 har allerede understøttelse af CSS Container Queries, og Firefox er på vej, hvilket indikerer en bred udbredelse i den nærmeste fremtid.
Eksempler i praksis
Lad os dykke ned i nogle praktiske eksempler på, hvordan medieforespørgsler kan anvendes til at skabe dynamiske og brugervenlige oplevelser.
Tilpas layout ved forskellige visningsportbredder
Dette er den mest udbredte anvendelse af medieforespørgsler og grundlaget for responsivt design. Ved at bruge min-width og max-width kan du definere forskellige layouts for specifikke skærmstørrelser. En 'mobile-first' tilgang starter med stilarter for små skærme (uden medieforespørgsel eller med max-width) og derefter gradvist tilføjer stilarter for større skærme (med min-width).
body { font-size: 16px; } .container { width: 90%; margin: 0 auto; padding: 10px; } @media screen and (min-width: 768px) { body { font-size: 18px; } .container { width: 70%; padding: 20px; } } @media screen and (min-width: 1200px) { body { font-size: 20px; } .container { width: 50%; } }Husk, at moderne CSS-layouts med Grid og Flexbox ofte kan reducere behovet for mange width-baserede medieforespørgsler, da de er intrinsisk responsive.
Mørk tilstand (Dark Mode)
Som tidligere nævnt kan prefers-color-scheme bruges til at implementere mørk tilstand. Dette er ikke kun en æstetisk funktion, men også en tilgængelighedsfunktion, der kan reducere øjenbelastning, især i svagt lys.
:root { --background-color: #ffffff; --text-color: #333333; --link-color: #007bff; } @media (prefers-color-scheme: dark) { :root { --background-color: #1a1a1a; --text-color: #f0f0f0; --link-color: #66b3ff; } } body { background-color: var(--background-color); color: var(--text-color); } a { color: var(--link-color); }Ved at definere farver som CSS-variabler i :root (globalt) og derefter overskrive dem i medieforespørgslen, opnår du et rent og vedligeholdelsesvenligt farveskema.
Detektering af orientering, svæveeffekt og bevægelse
Disse funktioner giver dig mulighed for at finjustere brugeroplevelsen baseret på enhedens egenskaber ud over blot bredden. For eksempel kan du tilpasse layoutet baseret på enhedens orientering (stående eller liggende), eller justere interaktive elementer baseret på, om enheden understøtter svæveeffekter (mus) eller kun berøring.
/* Hvis visningsporten er i stående orientering */ @media screen and (orientation: portrait) { .sidebar { display: none; /* Skjul sidebar i stående tilstand */ } .main-content { width: 100%; } } /* Hvis den primære inputenhed er en grov pointer (f.eks. finger) */ @media (pointer: coarse) { button, input[type="checkbox"] { padding: 15px; min-width: 48px; /* Sikre store trykflader */ min-height: 48px; } } /* Fjern animationer, hvis brugeren foretrækker reduceret bevægelse */ @media (prefers-reduced-motion: reduce) { .animated-element { animation: none !important; transition: none !important; } }Responsiv typografi
Tekststørrelsen skal også tilpasses skærmstørrelsen for optimal læsbarhed. Traditionelt har dette involveret flere medieforespørgsler, men med nye CSS-funktioner som clamp() kan du opnå flydende typografi med minimal kode.
/* Gammel metode med medieforespørgsler */ body { font-size: 16px; } @media (min-width: 600px) { body { font-size: 18px; } } @media (min-width: 900px) { body { font-size: 20px; } } /* Ny metode med clamp() - ingen medieforespørgsler nødvendige for dette */ .fluid-text { font-size: clamp(1rem, 2vw + 1rem, 2.5rem); /* min-størrelse, foretrukken størrelse (relativ til viewport), max-størrelse */ }clamp()-funktionen sikrer, at din tekst skaleres op og ned med visningsporten, men altid forbliver inden for et defineret minimums- og maksimumsområde, hvilket giver en meget robust typografiløsning.
Ofte Stillede Spørgsmål om Medieforespørgsler
1. Hvad er forskellen på min-width og max-width i medieforespørgsler?
min-width anvender stilarter, når visningsporten er *mindst* den angivne bredde, hvilket er almindeligt i en "mobile-first" tilgang. Du starter med stilarter for små skærme og tilføjer derefter stilarter for større skærme. max-width anvender stilarter, når visningsporten er *højst* den angivne bredde, hvilket er typisk for en "desktop-first" tilgang, hvor du starter med store skærme og derefter tilpasser nedad.
2. Hvorfor er det vigtigt at tænke på tilgængelighed med medieforespørgsler?
Medieforespørgsler for tilgængelighed (som prefers-reduced-motion, prefers-color-scheme osv.) giver dig mulighed for at respektere brugerens individuelle systemindstillinger. Dette forbedrer oplevelsen markant for brugere med specifikke behov, f.eks. ved at fjerne forstyrrende animationer for dem med vestibulære lidelser eller tilbyde en mørk tilstand for at reducere øjenbelastning, hvilket gør dit website mere inklusivt.
3. Kan jeg bruge JavaScript til at detektere medieforespørgsler?
Ja, du kan bruge window.matchMedia()-metoden i JavaScript. Dette er nyttigt, når du har brug for at udløse JavaScript-funktionalitet baseret på enhedens egenskaber, f.eks. at ændre adfærden af et interaktivt element, når en bestemt skærmstørrelse er nået. Du kan også tilføje en lytter for at reagere på ændringer i medieforholdene.
4. Er container-forespørgsler en erstatning for medieforespørgsler?
Nej, container-forespørgsler er et supplement til medieforespørgsler, ikke en erstatning. Medieforespørgsler er stadig afgørende for globale layoutjusteringer baseret på hele visningsporten eller brugerpræferencer. Container-forespørgsler løser derimod problemet med at style individuelle komponenter baseret på størrelsen af deres forældrecontainer, hvilket muliggør mere modulære og genanvendelige UI-komponenter. Sammen giver de en mere komplet værktøjskasse til responsivt design.
5. Hvordan kan jeg undgå at skabe en alt for kompleks CSS-kodebase med medieforespørgsler?
For at undgå en kompleks CSS-kodebase bør du først og fremmest fokusere på at skabe et fleksibelt grundlayout ved hjælp af moderne CSS-funktioner som Flexbox og Grid, der kan tilpasse sig forskellige skærmstørrelser uden medieforespørgsler. Brug derefter medieforespørgsler sparsomt til specifikke breakpoints, hvor layoutet virkelig skal ændre sig markant, eller til at implementere brugerpræferencer. En "mobile-first" tilgang og gennemtænkt arkitektur kan også hjælpe med at holde koden organiseret og let at vedligeholde.
Hvis du vil læse andre artikler, der ligner Medieforespørgsler: Nøglen til Responsivt Design, kan du besøge kategorien Teknologi.