Catégorie: Développement
Aide-mémoire des points de rupture responsives
Comparez les points de rupture entre frameworks, ou créez les vôtres
Comparez les points de rupture min-width par défaut utilisés par Tailwind, Bootstrap, Bulma et Material Design, copiez des media queries prêtes à l'emploi pour chacun d'eux, ou saisissez vos propres noms et largeurs de points de rupture pour en générer des personnalisés.
| Nom | Largeur minimale |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
@media (min-width: 640px) {
/* sm */
}
@media (min-width: 768px) {
/* md */
}
@media (min-width: 1024px) {
/* lg */
}
@media (min-width: 1280px) {
/* xl */
}
@media (min-width: 1536px) {
/* 2xl */
}Saisissez un nom et une largeur en pixels par ligne, par exemple « md, 768 ».
| Nom | Largeur minimale |
|---|---|
| sm | 480px |
| md | 768px |
| lg | 1100px |
| xl | 1440px |
@media (min-width: 480px) {
/* sm */
}
@media (min-width: 768px) {
/* md */
}
@media (min-width: 1100px) {
/* lg */
}
@media (min-width: 1440px) {
/* xl */
}Tout sur cette page est traité dans votre navigateur. Rien n'est envoyé.
À quoi sert cet outil
Chaque framework CSS choisit ses propres noms et largeurs en pixels pour ses points de rupture, ce qui rend facile de se tromper en changeant de projet. Cet outil liste côte à côte les valeurs par défaut de quatre frameworks courants et transforme n'importe lequel d'entre eux — ou une liste personnalisée que vous saisissez — en blocs @media (min-width: …) prêts à coller.
Mode d'emploi
- Choisissez un framework pour voir ses points de rupture par défaut et ses media queries.
- Copiez le CSS généré pour les points de rupture dont vous avez besoin.
- Ou listez vos propres noms et largeurs de points de rupture pour créer des requêtes personnalisées.
Confidentialité
Cet outil fonctionne entièrement dans votre navigateur. Ce que vous saisissez n'est jamais envoyé, stocké ni partagé : fermer l'onglet suffit à tout effacer.
Questions fréquentes
- Pourquoi min-width plutôt que max-width ?
- Une approche min-width, mobile-first, cible d'abord le plus petit écran avec les styles de base, puis chaque point de rupture ajoute des styles pour des écrans plus larges, ce qui évite les allers-retours de surcharge de règles propres à l'approche inverse.
- Ces valeurs correspondent-elles exactement aux valeurs par défaut des frameworks ?
- Oui, ce sont les points de rupture par défaut documentés de chaque framework. Si votre projet utilise une configuration Tailwind ou Bootstrap personnalisée, utilisez plutôt le constructeur de points de rupture personnalisés avec les valeurs propres à votre projet.
- Comment formater la liste de points de rupture personnalisés ?
- Un point de rupture par ligne, sous la forme d'un nom et d'une largeur en pixels séparés par une virgule ou un espace, par exemple « md, 768 ».