Media Query Generator

Générez rapidement vos media queries responsive. Choisissez un appareil cible ou des bornes personnalisées et obtenez la règle prête à compléter.

Paramètres

Aperçu

Cible : ≤ 768px

Code


            
            
            

Guide d'utilisation

Les media queries appliquent des styles selon la largeur du viewport. L'approche mobile-first privilégie min-width pour ajouter des styles au fur et à mesure que l'écran s'agrandit.

  • Breakpoints courants : 480px, 768px, 1024px, 1280px.
  • Préférez les em pour des breakpoints qui suivent le zoom utilisateur.

FAQ

min-width ou max-width ?

min-width construit du plus petit au plus grand (mobile-first) ; max-width fait l'inverse. Mélanger les deux complique la maintenance.

Quels breakpoints choisir ?

Adaptez-les à votre contenu plutôt qu'aux appareils. Des valeurs comme 600, 900 et 1200px couvrent la plupart des cas.