Kom Godt Igang Med CSS Media Queries
Media queries bliver brugt til at optimere cross-platform kompatibilitet, og styre hvordan en hjemmeside vises på tværs af skærm størrelser.
Edited: 2017-07-14 08:49
Et vigtigt design-mål for web-designere, er at deres sider vil fungere tilfredsstillende på alle enheder. Der er flere måder at opnå en tilfredsstillende cross-platform kompatibilitet, en af de dårligste måder at gøre det på, er ved at lave to forskellige versioner af en hjemmeside. Eksempelvis en til smartphones og tablets, og igen en tredje 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 øjnene i dag, fordi ofte er klient baseret JavaScript heller ikke særlig kompatibel, hvilket kan være grund til at undgå brugen af JavaScript de steder, hvor det ikke er absolut nødvendigt. Generelt er det en dårlig idé at bruge JavaScript til layout.
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 mindre skærme, som vi eksempelvis slås med 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.
Fortæl os hvad du tænker: