Zie welke media queries op dit moment op uw scherm van toepassing zijn, bijgewerkt terwijl u het venster verkleint. Range syntax, prefers-color-scheme, reduced motion, hover en pointer, breakpoints en container queries.
Een media query past CSS alleen toe als een voorwaarde over het apparaat of de instellingen van de gebruiker waar is. @media (width >= 48rem) { ... } richt zich op bredere schermen; prefers-color-scheme, prefers-reduced-motion, hover en pointer beschrijven instellingen en invoer. Schrijf eerst de stijlen voor kleine schermen en voeg daarna min-width-queries toe voor grotere lay-outs.
Meest gebruikte queries
Het paneel hieronder voert zestien queries uit via window.matchMedia in uw eigen browser en werkt bij wanneer u het venster verkleint, een telefoon draait of dark mode omzet. Daaronder: de range syntax, queries voor gebruikersvoorkeuren, invoerqueries, breakpoints van frameworks, en wanneer een container query het betere hulpmiddel is.
Een kortere manier om breedtevoorwaarden te schrijven met vergelijkingsoperatoren: (width >= 600px) in plaats van (min-width: 600px), en (400px <= width < 900px) voor een bereik. Alle huidige grote browsers ondersteunen het; Safari voegde het toe in 16.4 in 2023, dus controleer caniuse als u oudere apparaten ondersteunt.
Mobile-first stylesheets gebruiken min-width: de basisstijlen bedienen kleine schermen en elke query voegt lay-out toe voor bredere. Zo blijft de CSS voor kleine schermen eenvoudig. max-width is prima voor kleine uitzonderingen, maar beide mengen op hetzelfde breakpoint kan een gat of overlap van één pixel opleveren; range syntax met < en >= voorkomt dat.
Gebruik @media (prefers-color-scheme: dark) en definieer uw kleurvariabelen daarbinnen opnieuw. In JavaScript geeft window.matchMedia('(prefers-color-scheme: dark)').matches hetzelfde antwoord, en het change-event gaat af wanneer de gebruiker wisselt.
Media queries kijken naar de viewport en het apparaat. Container queries kijken naar de grootte van een parent-element dat met container-type is gemarkeerd. Een kaart die van lay-out moet wisselen als zijn kolom smal is, waar hij ook staat, vraagt om een container query.
Veelvoorkomende oorzaken: de viewport-metatag ontbreekt, waardoor telefoons doen alsof ze ongeveer 980px breed zijn; de query staat boven de regel die hij moet overschrijven en verliest op bronvolgorde; of er ontbreekt een spatie of haakje, wat de hele voorwaarde stilletjes ongeldig maakt.
Waarden uit de officiële documentatie van Tailwind CSS v4 en Bootstrap 5. Die van Tailwind staan in rem, hier getoond bij de standaard 16px.
Standaard breakpoints in twee populaire frameworks (min-width, mobile first)
Range syntax leest als wiskunde en maakt niet-overlappende bereiken eenvoudig: < aan de ene kant, >= aan de andere.
Kleine toevoegingen waardoor een site op elk apparaat als vanzelf aanvoelt.
matchMedia geeft een object terug met matches en een change-event. Dat is wat het live paneel op deze pagina gebruikt.
Kiezen tussen de twee
Beide kaarten hebben dezelfde markup. Alleen de brede heeft ruimte om naar een rijlay-out te wisselen. Pas de breedtes aan om het te zien veranderen.
Tailwind v4-varianten en de CSS die ze opleveren
Breedte
Smaller dan Tailwind sm (640px bij standaardlettergrootte)
Breedte
Tussen Tailwind sm en lg
Breedte
Tailwind lg en groter
Breedte
Klassiek tablet-breakpoint, oude syntax
Oriëntatie
Viewport hoger dan breed
Oriëntatie
Viewport breder dan hoog
Invoer
Hoofdinvoer kan hoveren (muis, trackpad)
Invoer
Hoofdinvoer is onnauwkeurig (vinger)
Invoer
Hoofdinvoer is nauwkeurig (muis, stylus)
Invoer
Minstens één invoer kan hoveren
Voorkeur
Systeem staat op dark mode
Voorkeur
Gebruiker vroeg om minder beweging
Voorkeur
Gebruiker vroeg om meer contrast
Scherm
Scherm met hoge dichtheid, 2x of meer
Scherm
Draait als geïnstalleerde web-app
Scherm
Afdrukken of afdrukvoorbeeld
Kopieer de overeenkomende
Viewport: {size}. Verklein het venster, draai het apparaat of wijzig uw systeemthema en de lijst werkt bij.
meten...
{w} x {h} CSS-px, pixelverhouding {r}x
Live resultaten van media queries
Groep
Query
Van toepassing als
Nu
Ja
Nee
n/a betekent dat deze browser de query niet kon lezen, wat bij range syntax in oudere versies gebeurt. Exacte apparaatgroottes nodig? Probeer de
schermresolutietool
Gratis beginnen · Geen creditcard nodig