Responsive
Een responsive site houdt rekening met de grote van je scherm (viewport). Dat is meer dan alleen het kleiner en groter maken. Dat kan je goed doen met de flexbox. Maar je kunt bij het kleiner maken meer in het ontwerp aanpassen.
Hieronder zie je een voorbeeld waarbij de kleur van de achtergrond wijzigt naarmate het scherm groter of kleiner wordt.
/* Extra small devices (portrait phones, less than 576px) */
/* Let op geen media query, dit is de standaard waar je in de css vanuit gaat */
body {
background-color: lightblue;
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
body {
background-color: lightgreen;
}
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
body {
background-color: lightcoral;
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
body {
background-color: lightseagreen;
}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
body {
background-color: lightsalmon;
}
}Bekijk het resultaat (maak het scherm kleiner en groter) (broncode)
In dit voorbeeld gaan we uit van het kleinste scherm. Naarmate het scherm groter wordt wordt de css code actief die in de @media tag staat. Dus bij een scherm breder dan 576px wordt de achtergrondkleur lichtgroen. Daarmee overschrijf je de standaard waarde van lichtblauw. In een scherm groter dan 1200px wordt de kleur lightsalmon, daarmee worden alle vorige kleuren overschreven. Je kan dat ook goed zien in de inspector:
