Media Queries, in het kort komt het er op neer dat een query bestaat uit een bepaald media type en een aantal voorwaarden om zodoende specifiek bepaalde opmaak te kunnen toepassen. Dit wordt bijvoorbeeld gebruikt voor het maken van een responsive website waarbij ongedacht de afmetingen van een apparaat een website altijd goed getoond kan worden. Het gaat dan om voorwaardes die waar of niet waar zijn.
Op deze manier kun je dan een website aanpassen op basis van de breedte of hoogte van het venster, bijvoorbeeld handig als je een website optimaliseert voor mobiele telefoons en tablets. Je plaatst dan in het CSS bestand een voorwaarde waarmee je bijvoorbeeld aangeeft dat bepaalde opmaak toegepast moet worden als een venster kleiner is dan 600px maar groter dan 200px. Anders zal de opmaak niet worden toegepast.
Je past dan de onderstaande voorwaarde toe, hier binnen vul je dan de gewenste opmaak in. Je ziet hier een minumum en een maximum staan, voldoet het venster niet aan deze opgegeven voorwaarde dan zal de opmaak die is ingevoerd dus niet worden toegepast.
Op basis van de breedte van een venster.
@media screen and (min-width:200px) and (max-width:600px) {
div.product-info {
width:450px;
}
}
Op basis van de hoogte van een venster.
@media screen and (min-height:200px) and (max-height:600px) {
div.product-info {
width:450px;
}
}
Of je past bepaalde opmaak toe in het geval dat een scherm staand (portrait) of liggend (landscape) bekeken wordt, denk bijvoorbeeld aan een iPhone, iPod of een iPad.
@media screen and (orientation:portrait) {
div.product-info {
width:450px;
}
}
Voor hoge resolutie schermen zoals de iPad 3 en hoger moeten afbeeldingen om deze scherp te kunnen tonen groter worden ingesteld. Een afbeelding die nu 200 x 200 pixels is moet in dat geval gemaakt worden als een afbeelding van 400 x 400 pixels, middels CSS schaal je de afbeelding vervolgens. De volledige code die je kunt gebruiken hieronder.
@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.logo {
background-image:url(logo.png);
background-repeat:no-repeat;
background-size:200px 200px;
}
}
Hieronder een klein overzicht met de afmetingen van bekende apparaten. Een uitgebreider overzicht van afmetingen van telefoons en tablets kan bekeken worden op screensiz.es
Apparaat | Afmetingen | Resolutie | Pixel Ratio |
iPhone 3GS | 320 x 480 | 320 x 480 | 1 |
iPhone 4 en 4S | 320 x 480 | 640 x 960 | 2 |
iPhone 5 | 320 x 568 | 640 x 1136 | 2 |
iPad 1, 2 en iPad Mini | 768 x 1024 | 768 x 1024 | 1 |
iPad 3 en 4 | 768 x 1024 | 1536 x 2038 | 2 |
Nexus 7 | 600 x 905 | 800 x 1280 | 1.33 |