Voyez quelles media queries correspondent à votre écran en ce moment, mises à jour quand vous redimensionnez. Syntaxe de plage, prefers-color-scheme, réduction des animations, hover et pointer, breakpoints et container queries.
Une media query n'applique du CSS que lorsqu'une condition sur l'appareil ou sur les réglages de l'utilisateur est vraie. @media (width >= 48rem) { ... } cible les écrans plus larges ; prefers-color-scheme, prefers-reduced-motion, hover et pointer décrivent les réglages et le mode de saisie. Écrivez d'abord les styles pour petits écrans, puis ajoutez des requêtes min-width pour les mises en page plus larges.
Requêtes les plus utilisées
Le panneau ci-dessous exécute seize requêtes via window.matchMedia dans votre propre navigateur et se met à jour quand vous redimensionnez la fenêtre, tournez un téléphone ou passez en mode sombre. En dessous : la syntaxe de plage, les requêtes de préférences utilisateur, les requêtes de saisie, les breakpoints des frameworks, et les cas où une container query est le meilleur outil.
Une façon plus courte d'écrire les conditions de largeur avec des opérateurs de comparaison : (width >= 600px) au lieu de (min-width: 600px), et (400px <= width < 900px) pour une plage. Elle est prise en charge par tous les principaux navigateurs actuels ; Safari l'a ajoutée dans la version 16.4 en 2023, donc vérifiez caniuse si vous prenez en charge des appareils plus anciens.
Les feuilles de style mobile first utilisent min-width : les styles de base servent les petits écrans et chaque requête ajoute de la mise en page pour les plus larges. Le CSS des petits écrans reste ainsi simple. max-width convient pour de petites exceptions, mais mélanger les deux au même breakpoint peut laisser un trou ou un chevauchement d'un pixel ; la syntaxe de plage avec < et >= l'évite.
Utilisez @media (prefers-color-scheme: dark) et redéfinissez vos variables de couleur à l'intérieur. En JavaScript, window.matchMedia('(prefers-color-scheme: dark)').matches donne la même réponse, et son événement change se déclenche quand l'utilisateur change de thème.
Les media queries regardent le viewport et l'appareil. Les container queries regardent la taille d'un élément parent marqué avec container-type. Une carte qui doit changer de mise en page quand sa colonne est étroite, où qu'elle soit placée, a besoin d'une container query.
Causes fréquentes : la balise meta viewport est absente, donc les téléphones font comme s'ils mesuraient environ 980px de large ; la requête se trouve au-dessus de la règle qu'elle doit remplacer et perd à cause de l'ordre dans le code ; ou il manque une espace ou une parenthèse, ce qui invalide silencieusement toute la condition.
Valeurs issues de la documentation officielle de Tailwind CSS v4 et de Bootstrap 5. Celles de Tailwind sont en rem, affichées ici avec la taille par défaut de 16px.
Breakpoints par défaut de deux frameworks populaires (min-width, mobile first)
La syntaxe de plage se lit comme des maths et facilite les plages sans chevauchement : < d'un côté, >= de l'autre.
De petits ajouts qui donnent à un site un aspect natif sur chaque appareil.
matchMedia renvoie un objet avec matches et un événement change. C'est ce qu'utilise le panneau en direct de cette page.
Choisir entre les deux
Les deux cartes ont le même balisage. Seule la plus large a la place de passer en disposition en ligne. Modifiez les largeurs pour voir le changement.
Variantes Tailwind v4 et le CSS qu'elles produisent
Largeur
Plus étroit que sm de Tailwind (640px avec la taille de police par défaut)
Largeur
Entre sm et lg de Tailwind
Largeur
lg de Tailwind et plus
Largeur
Breakpoint tablette classique, ancienne syntaxe
Orientation
Viewport plus haut que large
Orientation
Viewport plus large que haut
Saisie
La saisie principale peut survoler (souris, pavé tactile)
Saisie
La saisie principale est imprécise (doigt)
Saisie
La saisie principale est précise (souris, stylet)
Saisie
Au moins une saisie peut survoler
Préférence
Système réglé en mode sombre
Préférence
L'utilisateur a demandé moins d'animations
Préférence
L'utilisateur a demandé plus de contraste
Affichage
Écran haute densité, 2x ou plus
Affichage
Exécuté comme web app installée
Affichage
Impression ou aperçu avant impression
Copier les correspondances
Viewport : {size}. Redimensionnez la fenêtre, tournez l'appareil ou changez le thème du système, et la liste se met à jour.
mesure en cours...
{w} x {h} px CSS, ratio de pixels {r}x
Résultats des media queries en direct
Groupe
Requête
Correspond quand
Maintenant
Oui
Non
n/a signifie que ce navigateur n'a pas pu analyser la requête, ce qui arrive avec la syntaxe de plage dans les anciennes versions. Besoin des tailles exactes de l'appareil ? Essayez l'
outil de résolution d'écran
Commencer gratuitement · Sans carte bancaire