Vad är en CSS Media Query?

En CSS media query är en teknik som låter dig tillämpa olika stilar baserat på enhetens egenskaper såsom skärmstorlek, upplösning, orientering eller färgschema. Media queries är grunden för responsiv webbdesign och gör det möjligt för webbplatser att anpassa sin layout och sitt utseende över olika enheter – från smartphones till skrivbordsmonitorer. De använder @media‑regeln i CSS för att villkorligt tillämpa stilar endast när vissa villkor är uppfyllda.

Verktygsbeskrivning

Detta verktyg hjälper dig att generera CSS media queries utan att behöva memorera komplex syntax. Välj helt enkelt din mål‑mediatyp, ange dimensioner, välj enhetsegenskaper, så genererar verktyget den kompletta @media‑regeln klar att använda i dina stilmallar. Det stödjer alla moderna media query‑funktioner inklusive viewport‑dimensioner, skärm‑orientering, bildförhållanden, upplösningsdetektering och färgschemapreferenser.

Funktioner

  • Val av mediatyp: Välj mellan alla, screen, print eller speech mediatyper
  • Dimensionkontroller: Ställ in minsta och största bredd/höjd med vilken CSS‑enhet som helst (px, em, rem, vw, osv.)
  • Enhetsegenskaper: Konfigurera orientering, bildförhållande, upplösning och färgschemapreferenser