CSS media queries oefening.
verschalen als een baas.

Hier een speelbak om te oefenen met media queries: In het css bestand breng je "breekpunten" (media queries) aan die bepalen op welke schermbreedtes je een andere layout maakt. Gebruik de speelbak om live met de code te spelen, of om het code voorbeeld als ZIP te downloaden en te openen in je eigen editor.

Wat we in dit voorbeeld doen

REM in plaats van pixels

We gebruiken rem als eenheid in plaats van pixels om de margins, paddings en font groottes relatief af te laten hangen van de font-size die we globaal opgeven bovenin de css file. Het voordeel hiervan is dat als we de font grootte veranderen, dan ook meteen de margins en de paddings van alle elementen in de pagina mee verschalen.

Min-width en max-width?

Hangt ervan af. Als je van groot naar klein werkt gebruik je max-width (veranderingen TOT maximaal een bepaalde schermbreedte) en als je van klein naar groot werkt (mobile first, zoals wij doen) dan specificeer je min-width (veranderingen VANAF minimaal een bepaalde schermbreedte)

mobile first

Eerst plaats je alle CSS styling die "standaard" gaat gelden voor alle elementen (van 0px schermbreedte tot oneindig groot beeldscherm) daarna maak ik het scherm zo klein mogelijk en begin dan, terwijl ik het LANGZAAM groter maak, te ontdekken waar voor mij het design "breekt". En voor DIE "breekpunten" maak ik de CSS media queries met "alternatieve" styling! Die media queries vind je onderaan de CSS file!

Speelbak in CodeSandBox