Wat is een CSS Media Query?

Een CSS media query is een techniek die je in staat stelt verschillende stijlen toe te passen op basis van apparaatkenmerken zoals schermgrootte, resolutie, oriëntatie of kleurenschema. Media queries vormen de basis van responsive webdesign, waardoor websites hun lay-out en uiterlijk kunnen aanpassen aan verschillende apparaten – van smartphones tot desktopmonitoren. Ze gebruiken de @media‑regel in CSS om conditioneel stijlen toe te passen alleen wanneer aan bepaalde voorwaarden wordt voldaan.

Toolbeschrijving

Dit hulpmiddel helpt je CSS media queries te genereren zonder de complexe syntaxis uit het hoofd te leren. Selecteer eenvoudig je gewenste mediatype, specificeer de afmetingen, kies apparaatfuncties, en het hulpmiddel genereert de volledige @media‑regel klaar voor gebruik in je stylesheets. Het ondersteunt alle moderne media query‑functies, inclusief viewport‑afmetingen, schermoriëntatie, beeldverhoudingen, resolutiedetectie en voorkeuren voor kleurenschema’s.

Functies

  • Mediatype‑selectie: Kies tussen alle, screen, print of speech mediatypes
  • Dimensie‑instellingen: Stel minimale en maximale breedte/hoogte in met elke CSS‑eenheid (px, em, rem, vw, etc.)
  • Apparaatfuncties: Configureer oriëntatie, beeldverhouding, resolutie en voorkeuren voor kleurenschema
  • Aangepaste voorwaarden: Voeg een aangepaste media‑feature toe, zoals hover‑mogelijkheid of pointer‑type
  • Logische operatoren: Combineer voorwaarden met AND-, OR- of NOT‑operatoren voor complexe queries
  • Live preview: Bekijk de gegenereerde CSS‑code in realtime bij het aanpassen van de instellingen
  • Referentie voor veelvoorkomende breakpoints: Snelle toegang tot standaard breakpoints voor mobiel, tablet, desktop en speciale functies

Toepassingsscenario's

  • Responsieve lay-outs maken die zich aanpassen aan verschillende schermgroottes
  • Specifieke apparaten targeten, zoals tablets of smartphones
  • Donkere en lichte thema's implementeren
  • Print‑stylesheets optimaliseren
  • Detecteren van hoge‑resolutie (retina) displays
  • Lay-outs aanpassen op basis van apparaatoriëntatie
  • Mobiel‑eerst of desktop‑eerst responsieve ontwerpen bouwen
  • CSS media query‑syntaxis testen en leren