Moderne webudvikling er utænkelig uden adaptive/responsive design. Det muliggør, at brugere kan anvende webressourcer lige effektivt på enhver enhed: smartphone, tablet, desktop eller TV.

Hvordan fungerer det?

1. Udviklingsteamet definerer, hvordan hvert element skal se ud afhængigt af skærmstørrelsen;
2. De nødvendige instruktioner indsættes i koden;
3. Browseren overvåger ændringer i viewporten;
4. Browseren anvender de regler, som udviklingsteamet har angivet i koden.

Medieforespørgsler

Medieforespørgsel muliggør adaptive/responsive design. Ved hjælp af disse forespørgsler kan udviklere angive stilarter for ethvert element afhængigt af skærmstørrelsen.

Bemærk

En medieforespørgsel kan opfattes som instruktioner: "Hvis en brugers skærm er en desktop, anvendes disse stilarter på elementet. Hvis en brugers skærm er en smartphone, anvendes andre stilarter på elementet. Og så videre.".

Den grundlæggende syntaks for en medieforespørgsel er som følger:

@media <media_type> <operator> (<media_feature>) {
 /* CSS rules */
}

1. <media_type> - angiver typen af enhed. Mulige værdier:
   • all - standardværdi. Hvis intet er angivet, gælder reglen for alle enheder;
   • print - reglen gælder for enheder, der producerer trykte dokumenter, såsom printere;
   • screen - reglen gælder for alle enheder med fysisk skærm.
2. <media_feature> - angiver enhedens egenskaber. Mest almindelige anvendelse:
   • min-width: - minimumsbredde for viewport;
   • max-width: - maksimumbredde for viewport.
3. <operator> - medietype og mediefunktion adskilles af en valgfri logisk operator. Mulige værdier: and eller ,.

Bemærk

I de følgende kapitler gennemgås brugen af medieforespørgsler i praksis.