CSS: media queries

Media queries worden gebruikt om vanuit CSS een onderscheid te kunnen maken om conditioneel stijl toe te passen in bepaalde scenarios.

Conceptueel: Als [media-query] dan [CSS].

In onze lessen gaan we dit vooral gebruiken om naar de breedte van het scherm te kijken.

Basis syntax

@media media-type and (media-feature) {
    /* CSS regels die alleen gelden wanneer de conditie waar is */
    .element {
        property: value;
    }
}

Width en Height

/* Minimum breedte */
@media (min-width: 768px) { }

/* Maximum breedte */
@media (max-width: 767px) { }

/* Minimum en maximum combineren */
@media (min-width: 768px) and (max-width: 1023px) { }

/* Height varianten */
@media (min-height: 600px) { }
@media (max-height: 800px) { }

Praktisch voorbeeld

/* show items under each other */
.flex-item {
  width: 100%;
}
 
/* Or show them in rows of 3 */
@media (min-width: 30rem) {
  .flex-item {
    width: 33%;
  }
}

Ook voor gebruikersvoorkeuren

@media (prefers-color-scheme: dark) { /* Dark mode voorkeur */ }
@media (prefers-color-scheme: light) { /* Light mode voorkeur */ }
@media (prefers-reduced-motion: reduce) { /* Minder animaties */ }
@media (prefers-reduced-motion: no-preference) { /* Normale animaties */ }
@media (prefers-contrast: high) { /* Hoog contrast voorkeur */ }