Hoe ik mijn blog responsive heb gemaakt met css @media queries

Een tijdje geleden maakte iedereen nog een website om te tonen in een webbrowser op een PC of MAC. Dat is sinds de komst van de smartphone anders geworden, steeds vaker hoor je de term ‘responsive (webdesign)’. Niet zo gek, want het scheelt een hoop gedoe als je een website op een smartphone bekijkt. Waar je normaal moest zoomen om dingen goed te bekijken of een knopje goed in te drukken, bekijk je nu een speciale versie waardoor het gebruik op je smartphone een stuk gemakkelijker wordt!

Een aantal weken geleden ben ik hier ook eens mee gaan spelen, ik ben er op een avond eens lekker voor gaan zitten heb me een beetje ingelezen in media queries en heb mijn eigen blog ook omgebouwd naar een responsive versie. Het gemakkelijkst is dit te zien door de browser groter en kleiner te maken. Dan zie je dat de opmaak van groot naar klein 3 of 4 keer veranderd. Hieronder leg ik kort uit hoe ik dat heb gedaan.

Manier één: Verschillende stylesheets

Er zijn verschillende manieren om met media queries te werken. Je kunt dit doen door per apparaat (of grootte van de browser) een aparte stylesheet in te stellen, zoals hieronder:

< link rel="stylesheet" href="maximaal480.css" media="screen and (max-width: 480px)" />

De stylesheet hierboven wordt aangeroepen wanneer je scherm een breedte heeft tot maximaal 480px. Deze zin kan je gewoon herhalen en de link en de breedte aanpassen aan de resoluties die jij graag wilt ondersteunen.

Manier twee: Alles in één stylesheet

De tweede manier is om het allemaal in één stylesheet te doen. Dit is de manier waarop ik het heb gedaan. Dit leek mij het meest handig omdat ik de gehele stylesheet al had staan en hierdoor aan de onderkant de responsive stijlen kon toevoegen. (Achteraf moet ik zeggen dat de andere manier denk ik een stuk netter en vooral duidelijker was geweest, maar dat is achteraf.) Om alles in één stylesheet te zetten zet je het volgende in je stijldocument (css-bestand):

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-device-width : 480px) {
/* Hieronder komt je opmaak te staan */
}

De stijlen die je hier onder het zinnetje /* Hieronder komt je opmaak te staan */ toe voegt worden alleen getoond op een scherm tot 480 pixels breed. Net als bij de eerste manier kan je deze ook in je stylesheet meerdere keren gebruiken en de breedte aanpassen naar de breedtes die jij graag wilt ondersteunen.

In bovenstaande voorbeelden heb ik alleen de maximale breedte van het scherm aangegeven, je kunt ook de minimale breedte aangeven. Om alleen de minimale breedte aan te geven (in dit voorbeeld 320 pixels breed) wordt het bij de eerste manier:

< link rel="stylesheet" href="minimaal320.css" media="screen and (min-width: 320px)" />

En bij de tweede manier:

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) {
/* Hieronder komt je opmaak te staan */
}

Voor de allermeeste controle over alle breedtes voeg je de minimale (in dit voorbeeld weer 320 pixels breed) en de maximale breedte (in dit voorbeeld 480 pixels breed) toe, bij de eerste manier:

< link rel="stylesheet" href="min320max480.css" media="screen and (min-width: 320px) and (max-width: 480px)" />

En bij de tweede manier:

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (min-device-width : 480px) {
/* Hieronder komt je opmaak te staan */
}

In mijn geval:

Zoals eerder al heb aangegeven heb ik er voor gekozen om alles in één stylesheet te zetten, dus voor manier twee te kiezen. Omdat ik bij mijn eigen opmaak een vast aantal blokken met een vaste breedte en hoogte heb en ik altijd wil dat het één geheel blijft heb ik voor een aantal breedtes gekozen, waarbij je ook kan zien dat het dus echt niet altijd zo hoeft te zijn dat je de resolutie of een beeldscherm moet pakken maar ook eigen breedtes kunt pakken die beter binnen jou ontwerp passen. Hieronder staan de breedtes die ik toe pas:

/* vanaf 320px breed (iPhone) 2 kolommen */
@media only screen and (min-width : 320px) {
/* Hieronder de opmaak voor de Iphone, met twee smalle kolommen op de homepage */
}

/* vanaf 480px breed 2 kolommen */
@media only screen and (min-width : 480px) {
/* Hieronder de opmaak voor smartphones met een breedte vanaf 480 pixels, met twee bredere kolommen op de homepage */
}

/* vanaf 960px breed, 4 kolommen */
@media only screen and (min-width : 960px) {
/* Hieronder de opmaak voor een beeldscherm vanaf 960 pixels, met vier kolommen op de homepage */
}

/* vanaf 1540px breed, 6 kolommen */
@media only screen and (min-width : 1540px) {
/* Hieronder de opmaak voor een beeldscherm met een hogere resolutie dan 1540 pixels breed, met zes kolommen op de homepage */
}

Het laatste in mijn geval is dus een layout van 1540 pixels breed. Dus heb je een beeldscherm met een resolutie van 2560×1440 pixels dan word alsnog de versie van 1540 pixels breed getoond.

Andere manieren

Uiteraard zijn er ook andere manier, je kan ook een responsive layout opzetten door middel van javascript met mooie animaties bij het switchen van browsergrootte en dergelijke, alleen ben ik niet zo’n held met javascript dus kan ik niet laten zien hoe dat gaat, sorry!