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
  • Anpassade villkor: Lägg till valfri anpassad media‑funktion som hover‑förmåga eller pekartyps
  • Logiska operatorer: Kombinera villkor med AND, OR eller NOT‑operatorer för komplexa frågor
  • Live‑förhandsgranskning: Se genererad CSS‑kod uppdateras i realtid när du justerar inställningarna
  • Referens för vanliga brytpunkter: Snabb åtkomst till standardbrytpunkter för mobil, surfplatta, skrivbord och specialfunktioner

Användningsområden

  • Skapa responsiva layouter som anpassar sig till olika skärmstorlekar
  • Rikta in sig på specifika enheter som surfplattor eller smartphones
  • Implementera mörkt läge och ljust läge
  • Optimera utskrifts‑stilmallar
  • Detektera högupplösta (retina) skärmar
  • Justera layouter baserat på enhetens orientering
  • Bygga mobile‑first eller desktop‑first responsiva designer
  • Testa och lära sig CSS media query‑syntax