Résultats instantanés
Aucune donnée envoyée
Sans inscription
Le code apparaîtra ici.
🔒 Génération locale.
Une règle @media applique des styles seulement lorsque la largeur du viewport respecte une condition donnée.
Générez une règle @media CSS à partir d’une largeur minimale, maximale ou d’une plage responsive. Créez rapidement une media query CSS adaptée à votre breakpoint. Il est conçu pour obtenir, tester ou analyser une structure web directement dans le navigateur, avec un résultat visible qu’il reste possible de relire avant intégration.
Styles à partir d’une largeur. Formule ou repère : @media (min-width: …). Exemple : 768px.
Styles jusqu’à une largeur. Formule ou repère : @media (max-width: …). Exemple : 767px.
Combinez min et max. Formule ou repère : and. Exemple : 768px à 1199px.
Utilisez des breakpoints cohérents. Formule ou repère : viewport. Exemple : Mobile, tablette, desktop.
La règle s’applique à partir de la largeur indiquée.
La règle s’applique jusqu’à la largeur indiquée.
Oui.
Non, ils dépendent du design.
Lorsque l’outil produit ou analyse du code, une configuration ou une structure technique, vérifiez toujours le résultat dans votre navigateur ou votre projet avant une utilisation en production.
Les navigateurs, moteurs ou environnements peuvent interpréter certaines structures différemment : un test dans le contexte final reste donc utile.
Retrouvez ici les réponses aux questions les plus courantes sur l’utilisation de cet outil.
La règle s’applique à partir de la largeur indiquée.
La règle s’applique jusqu’à la largeur indiquée.
Oui.
Non, ils dépendent du design.
Oui.
Oui.
Convertissez rapidement euros, dollars, livres sterling et autres devises avec le dernier taux de change disponible.
Entrez votre date de naissance pour calculer votre âge exact en années, mois et jours, votre nombre de jours vécus et le temps restant avant votre prochain anniversaire.
Comparez deux produits selon leur prix et leur quantité grâce à des barres visuelles de prix unitaire.
