CSS - Media Queries voor responsive design

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.

Mobiele telefoons

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.

Breedte

Op basis van de breedte van een venster.

@media screen and (min-width:200px) and (max-width:600px) {
        div.product-info {
                width:450px;
        }
}

Hoogte

Op basis van de hoogte van een venster.

@media screen and (min-height:200px) and (max-height:600px) {
        div.product-info {
                width:450px;
        }
}

Staand/Liggend

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;
        }
}

Retina

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;
        }
}

Veel gebruikt

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