Modern webbdesign är otänkbar utan adaptiva/responsiva designer. Det möjliggör att användare kan använda webbresurser lika bra på alla enheter: smartphone, surfplatta, stationär dator eller TV.

Hur fungerar det?

1. Utvecklingsteamet definierar hur varje element ska se ut beroende på skärmstorlek;
2. Nödvändiga instruktioner anges i koden;
3. Webbläsaren övervakar förändringar i viewporten;
4. Webbläsaren tillämpar de regler som utvecklingsteamet har angett i koden.

Media queries

Media query möjliggör adaptiva/responsiva designer. Med hjälp av dessa frågor kan utvecklare ange stilar för valfritt element beroende på skärmstorlek.

Observera

Media query kan uppfattas som instruktioner: "Om användarens skärm är en stationär dator, tillämpa dessa stilar på elementet. Om användarens skärm är en smartphone, tillämpa andra stilar på elementet. Och så vidare.".

Den grundläggande syntaxen för media query är följande:

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

1. <media_type> – anger enhetstypen. Möjliga värden:
   • all – standardvärde. Om inget anges gäller regeln för alla enheter;
   • print – regeln gäller för enheter som producerar utskrifter, till exempel skrivare;
   • screen – regeln gäller för alla enheter med fysisk skärm.
2. <media_feature> – anger enhetens egenskaper. Vanligaste användning:
   • min-width: – minsta bredd på visningsytan;
   • max-width: – största bredd på visningsytan.
3. <operator> – media-typ och media-funktion separeras av en valfri logisk operator. Möjliga värden: and eller ,.

Observera

I följande kapitel kommer vi att behandla användningen av media queries i praktiken.