Hva er en CSS-mediespørring?

En CSS-mediespørring er en teknikk som lar deg anvende forskjellige stiler basert på enhetsegenskaper som skjermstørrelse, oppløsning, orientering eller fargeskjema. Mediespørringer er grunnlaget for responsivt webdesign, og gjør det mulig for nettsteder å tilpasse layout og utseende på tvers av forskjellige enheter - fra smarttelefoner til skrivebordsskjermer. De bruker @media-regelen i CSS for å betinget anvende stiler bare når visse betingelser er oppfylt.

Verktøybeskrivelse

Dette verktøyet hjelper deg med å generere CSS-mediespørringer uten å måtte huske kompleks syntaks. Velg bare målmedietypen din, spesifiser dimensjoner, velg enhetsfunksjoner, og verktøyet genererer den komplette @media-regelen klar til bruk i stilarkene dine. Det støtter alle moderne mediespørringsfunksjoner, inkludert viewport-dimensjoner, skjermretning, bildeforhold, oppløsningsdeteksjon og fargeskjemapreferanser.

Funksjoner

  • Valg av medietype: Velg mellom medietypene all, screen, print eller speech
  • Dimensjonskontroller: Angi minimum og maksimum bredde/høyde med hvilken som helst CSS-enhet (px, em, rem, vw, osv.)
  • Enhetsfunksjoner: Konfigurer orientering, bildeforhold, oppløsning og fargeskjemapreferanser
  • Tilpassede betingelser: Legg til en hvilken som helst tilpasset mediefunksjon som hover-kapasitet eller peker-type
  • Logiske operatører: Kombiner betingelser ved hjelp av AND-, OR- eller NOT-operatører for komplekse spørringer
  • Live-forhåndsvisning: Se generert CSS-kode oppdateres i sanntid mens du justerer innstillingene
  • Referanse for vanlige brytepunkter: Rask tilgang til standard brytepunkter for mobil, nettbrett, skrivebord og spesialfunksjoner

Bruksområder

  • Lage responsive layouter som tilpasser seg forskjellige skjermstørrelser
  • Målrette spesifikke enheter som nettbrett eller smarttelefoner
  • Implementere mørk modus og lys modus-temaer
  • Optimalisere stilark for utskrift
  • Detektere høyoppløselige (retina) skjermer
  • Justere layouter basert på enhetsretning
  • Bygge mobile-first eller desktop-first responsive design
  • Teste og lære CSS-mediespørringssyntaks