Ved at bruge denne side acceptere du samtidig Brugbarts og vores partneres brug af cookies.

Læs mere

Kom godt igang med CSS Media Queries

Lær om brugen af CSS Media Queries til håndholdte enheder.

Redigeret: 2016-01-14 04:34

Et vigtigt design-mål for web-designere, er at deres sider vil fungere tilfredsstillende på alle enheder. For at opnå det, har mange designet to forskellige versioner af deres hjemmesider, en til smartphones og tablets, og en anden til desktop computere.

Ofte har man været tvunget til at pille ved koden bagved hjemmesiderne, fordi de ikke har været kodet rigtigt fra begyndelsen. En udfordring som udviklere stadig må se i øjneene i dag, fordi ofte er klient baseret JavaScript heller ikke særlig kompatibel, hvilket kan være grund til at undgå det helt, de steder hvor det ikke er absolut nødvendigt.

Der er dog en ting, som web-designere kan anvende, nemlig de såkaldte CSS Media Queries. Brugen af dem, kan stort set helt overvinde problemer forbundet med de mindre skærme på håndholdte enheder.

Max-width med media queries

Max-width er egentlig en CSS egenskab, der gør det muligt for web-designere, at definere en maximums bredde for elementer på deres side. Når den bliver brugt sammen med en media querie, vil den dog i stedet give web-designere kontrol over, hvad der sker, hvis en skærm opløsning kommer under en angiven bredde – normalt vil man så angive bredden i pixel enheder. Se eksemplet nedenfor:

@media screen and (max-width:728px) {
  #basement {min-width:300px;}
  #LeftColumn, #Content {float:none;}
}

Hvis du ændre ovenstående, så det passer til dit eget layout, og placere det til sidst i dit StyleSheet, vil du kunne re-designe hele din side, så den passer perfekt til en skærmopløsning på under 728 pixels i bredden.

En anden vigtig ting at huske på, er at man kan have op til flere media queries i det samme stylesheet. Det er specielt brugbart, når man ønsker, at håndtere flere forskellige skærmopløsninger. Det eneste man skal gøre, er at skrive dem ind, ligesom vi gjorde med den første.

@media screen and (max-width:728px) {
  #basement {min-width:500px;}
  #LeftColumn, #Content {float:none;}
}
@media screen and (max-width:500px) {
  #basement {min-width:300px;}
  /* Resten af koden */
}

I det sidste eksempel er det vigtigt, at huske på, at angivelserne fra den første blok, også gælder for en skærmopløsning på mindre end 500px. Det skyldes selvfølgelig, at en bredde på mindre end 500px, stadig er mindre end de 728px, som vi angav i den første blok.

Husk viewport meta elementet

Håndholdte enheder har introduceret noget, som bliver kaldt for et "viewport", betegnelsen dækker blandt andet over zoom tilstanden for en hjemmeside. Ofte vil en håndholdt enhed, vise dig desktop versionen af en given hjemmeside, uanset om der måtte være brugt media queries på siden.

For at deaktivere denne feature, kan det være nødvendigt og placere et viewport meta element på din hjemmeside, som fortæller håndholdte enheder, hvordan de skal forholde sig.

<meta name="viewport" content="width=device-width, initial-scale=1">

Elementet ovenfor skal placeres i head sektionen på en side. Den første angivelse, width=device-width, fortæller at bredden for siden, skal være lig den bredde, som er tilgængelig på enheden. Den næste, initial-scale=1, indstiller zoom forhold på 1:1.