Constructeur de Media Queries CSS - Générateur de points de rupture responsive

Construisez et générez visuellement des media queries CSS pour le design web responsive

Outils CSS

Tool

BreakpointQuery TypeMedia Type

CSS Rules

Generated CSS

@media screen and (min-width: 768px) {
  .container {
    padding: 1rem;
  }
}

Live Preview

Resize your browser to see the breakpoint at ≥ 768px

320px

480px

768px

1024px

1280px

Highlighted widths fall within the media query range.

Comment utiliser

1Sélectionnez le type de média (screen, print, all)
2Choisissez un point de rupture prédéfini ou entrez des valeurs personnalisées min/max de largeur
3Ajoutez les règles CSS à appliquer à l'intérieur de la media query
4Copiez le code de media query généré

Questions fréquentes

Les media queries CSS permettent d'appliquer différents styles en fonction des caractéristiques du dispositif, comme la largeur, la hauteur ou l'orientation de l'écran. Elles sont la base du design web responsive.

Les points de rupture courants incluent 320px (petit mobile), 480px (mobile), 768px (tablette), 1024px (ordinateur portable) et 1280px (bureau). Vous pouvez également utiliser les points de rupture de frameworks populaires comme Tailwind CSS ou Bootstrap.