HomeCasa Prompts

Stratégie de breakpoints et de grille responsive pour un site ou une app

Définissez des breakpoints guidés par le contenu, une grille par plage de largeur, le comportement de chaque gabarit, les container queries, les images responsive, une matrice de tests et des tokens CSS. Conçu pour ChatGPT, Claude, Gemini et Microsoft Copilot. Il comprend 5 variables personnalisables et vous pouvez le copier gratuitement en un clic.

Intermédiaire · Texte · En attente de relecture éditoriale

Conçu pour:

Prompt

Agis comme designer produit et développeur front-end spécialisé en responsive design.

Contexte :
- Produit ou site : {{produit}}
- Gabarits de page principaux : {{gabarits}}
- Données sur les appareils et largeurs d'écran : {{appareils}}
- Technologie : {{technologie}}
- Contenu prioritaire sur petit écran : {{priorite}}

Livrables :
1. Approche : pourquoi caler les breakpoints sur les endroits où le contenu casse plutôt que sur des modèles d'appareils, et s'il faut partir du mobile.
2. Proposition de 3 à 5 breakpoints justifiés, en px et en em.
3. Grille par plage : colonnes, gouttières, marges latérales et largeur maximale du contenu.
4. Tableau de comportement par gabarit et breakpoint : navigation, en-tête, grilles de cartes, tableaux, formulaires, images et barres latérales.
5. Composants qui devraient utiliser des container queries plutôt que des media queries, avec exemples.
6. Typographie et espacements fluides avec clamp(), cohérents avec les breakpoints.
7. Images : srcset et sizes, direction artistique avec picture et formats modernes.
8. Différences tactile/pointeur : media queries hover et pointer, tailles des zones tactiles.
9. Matrice de tests : largeurs clés, zoom à 400 % et reflow à 320 px CSS (WCAG 1.4.10), orientation et texte agrandi.
10. Tokens et code d'exemple pour la technologie indiquée.

Contraintes :
- N'invente pas de données analytiques ; si elles manquent, utilise [À COMPLÉTER : part réelle des visites par largeur] et explique comment les obtenir.
- Donne la priorité à ce dont l'utilisateur a besoin sur mobile ; ne masque jamais un contenu essentiel.
- S'il manque une information clé sur les gabarits, pose-moi la question d'abord.

Format : titres numérotés, tableaux pour la grille et les comportements, et blocs de code.

Comment l'utiliser

  1. Indiquez vos gabarits principaux et, si vous les avez, les données réelles de largeurs d’écran. 2. Relisez le tableau de comportement avec le design et le développement. 3. Intégrez les tokens au code et passez la matrice de tests sur chaque gabarit.

Exemple d'utilisation

Produit : site d’une chaîne d’hôtels urbains · Gabarits : accueil, liste, fiche hôtel, réservation · Technologie : Tailwind · Priorité : dates et prix.

Exemple de résultat

1. Approche

Mobile first, avec des points de rupture là où le contenu casse (par exemple quand la carte hôtel ne tient plus sur une colonne), pas selon les modèles d'appareils. Données d'usage : [À COMPLÉTER : part des visites par largeur d'écran] ; à extraire de l'outil d'analytics en regroupant par largeur de fenêtre.

3. Grille

PlageColonnesGouttièreMargeLargeur max.
< 640 px (40em)416 px16 px100 %
640-1023 px824 px24 px100 %
1024-1279 px1224 px32 px100 %
≥ 1280 px (80em)1232 pxauto1200 px

4. Comportement de la fiche hôtel

  • Mobile : sélecteur de dates, prix par nuit et « Réserver » dans une barre fixe en bas ; jamais masqués.
  • Desktop : carte de réservation fixe dans la colonne de droite (4 sur 12).

10. Tokens Tailwind

// tailwind.config.js
module.exports = {
  theme: {
    screens: { sm: '40em', md: '48em', lg: '64em', xl: '80em' },
    container: {
      center: true,
      padding: { DEFAULT: '1rem', sm: '1.5rem', lg: '2rem' },
    },
    extend: { maxWidth: { content: '75rem' } },
  },
};

Des points de rupture en em respectent le zoom texte du navigateur…

Informations clés

Catégorie
Design UI/UX · Design responsive
Type de résultat
Texte
Niveau
Intermédiaire
Conçu pour
ChatGPT, Claude, Gemini et Microsoft Copilot
Vérifié sur
En attente de vérification éditoriale
Variables
Produit ou site, Gabarits principaux, Données appareils, Technologie et Contenu prioritaire sur mobile
Langue
Français
Prix
Gratuit, sans inscription
Mis à jour
07/11/2026

Questions fréquentes

Faut-il garder les breakpoints de mon framework CSS ?

C’est un bon point de départ, mais ajustez-les aux endroits où votre contenu casse réellement. Le prompt indique si les valeurs par défaut conviennent ou s’il faut en ajouter ou en déplacer.

Que sont les container queries et quand les utiliser ?

Elles permettent à un composant de s’adapter à la largeur de son conteneur plutôt qu’à celle de l’écran. Elles sont utiles pour les cartes ou widgets placés dans des colonnes de largeurs différentes.

À quoi sert ce prompt ?

Définissez des breakpoints guidés par le contenu, une grille par plage de largeur, le comportement de chaque gabarit, les container queries, les images responsive, une matrice de tests et des tokens CSS.

Avec quels outils d'IA fonctionne-t-il ?

Il est conçu pour ChatGPT, Claude, Gemini et Microsoft Copilot. Nous ne l'avons pas encore vérifié sur ces outils ; les résultats peuvent donc varier de l'un à l'autre.

Comment personnaliser le prompt ?

Cliquez sur « Personnaliser » et remplissez les variables (Produit ou site, Gabarits principaux, Données appareils, Technologie et Contenu prioritaire sur mobile). Le texte se met à jour instantanément et vous pouvez ensuite le copier en un clic. Les valeurs sont stockées uniquement dans votre navigateur.

Faut-il de l'expérience pour l'utiliser ?

Il est de niveau intermédiaire : il vaut mieux connaître le sujet pour fournir un bon contexte et relire le résultat d'un œil critique.

Ce prompt est-il gratuit ?

Oui. Tous les prompts de HomeCasa Prompts sont gratuits, sans inscription ni abonnement. Vous pouvez aussi les utiliser dans des projets professionnels.

Puis-je me fier au résultat de l'IA ?

Considérez-le comme un brouillon de qualité : vérifiez toujours les données, les chiffres et les affirmations importantes avant de publier ou de prendre des décisions.

Prompts similaires