HomeCasa Prompts

Strategia di breakpoint e griglia responsive per un sito o un’app

Definisci breakpoint basati sul contenuto, una griglia per intervallo di larghezza, il comportamento di ogni template, container query, immagini responsive, matrice di test e token CSS. Pensato per ChatGPT, Claude, Gemini e Microsoft Copilot. Include 5 variabili personalizzabili e puoi copiarlo gratuitamente con un clic.

Intermedio · Testo · In attesa di revisione editoriale

Pensato per:

Prompt

Agisci come product designer e sviluppatore front-end specializzato in responsive design.

Contesto:
- Prodotto o sito: {{prodotto}}
- Template di pagina principali: {{template}}
- Dati su dispositivi e larghezze dello schermo: {{dispositivi}}
- Tecnologia: {{tecnologia}}
- Contenuti prioritari su schermi piccoli: {{priorita}}

Consegne:
1. Approccio: perché definire i breakpoint dove il contenuto si rompe e non in base ai modelli di dispositivo, e se conviene partire dal mobile.
2. Proposta di 3-5 breakpoint motivati, in px ed em.
3. Griglia per intervallo: colonne, gutter, margini laterali e larghezza massima del contenuto.
4. Tabella di comportamento per template e breakpoint: navigazione, header, griglie di card, tabelle, moduli, immagini e barre laterali.
5. Componenti che dovrebbero usare container query invece di media query, con esempi.
6. Tipografia e spaziature fluide con clamp(), coerenti con i breakpoint.
7. Immagini: srcset e sizes, art direction con picture e formati moderni.
8. Differenze tra touch e puntatore: media query hover e pointer, dimensioni delle aree di tocco.
9. Matrice di test: larghezze chiave, zoom al 400% e reflow a 320 px CSS (WCAG 1.4.10), orientamento e testo ingrandito.
10. Token e codice di esempio per la tecnologia indicata.

Vincoli:
- Non inventare dati di analytics; se mancano, usa [DA COMPLETARE: quota reale di visite per larghezza] e spiega come ottenerli.
- Dai priorità a ciò che serve all'utente su mobile; non nascondere mai contenuti essenziali.
- Se mancano informazioni chiave sui template, chiedimele prima.

Formato: titoli numerati, tabelle per griglia e comportamento e blocchi di codice.

Come usarlo

  1. Indica i template principali e, se li hai, i dati reali sulle larghezze dello schermo. 2. Rivedi la tabella di comportamento con design e sviluppo. 3. Porta i token nel codice ed esegui la matrice di test su ogni template.

Esempio d'uso

Prodotto: sito di una catena di hotel urbani · Template: home, elenco, scheda hotel, prenotazione · Tecnologia: Tailwind · Priorità: date e prezzo.

Esempio di risultato

1. Approccio

Mobile first, con breakpoint dove il contenuto si rompe (ad esempio quando la card dell'hotel non sta più in una colonna), non in base ai modelli di dispositivo. Dati d'uso: [DA COMPLETARE: quota di visite per larghezza dello schermo]; si ricavano dallo strumento di analytics raggruppando per larghezza del viewport.

3. Griglia

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

4. Comportamento della scheda hotel

  • Mobile: selettore di date, prezzo a notte e «Prenota» in una barra fissa in basso; mai nascosti.
  • Desktop: card di prenotazione fissa nella colonna destra (4 su 12).

10. Token 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' } },
  },
};

I breakpoint in em rispettano lo zoom del testo del browser…

Dati chiave

Categoria
Design UI/UX · Design responsive
Tipo di output
Testo
Livello
Intermedio
Pensato per
ChatGPT, Claude, Gemini e Microsoft Copilot
Verificato in
In attesa di verifica editoriale
Variabili
Prodotto o sito, Template principali, Dati sui dispositivi, Tecnologia e Contenuti prioritari su mobile
Lingua
Italiano
Prezzo
Gratuito, senza registrazione
Aggiornato
07/11/2026

Domande frequenti

Devo usare i breakpoint del mio framework CSS?

Sono un buon punto di partenza, ma vanno adattati ai punti in cui il tuo contenuto si rompe davvero. Il prompt ti dice se i valori predefiniti vanno bene o se serve aggiungerne o spostarne qualcuno.

Cosa sono le container query e quando usarle?

Permettono a un componente di cambiare in base alla larghezza del suo contenitore e non dello schermo. Sono utili per card o widget che compaiono in colonne di larghezza diversa.

A cosa serve questo prompt?

Definisci breakpoint basati sul contenuto, una griglia per intervallo di larghezza, il comportamento di ogni template, container query, immagini responsive, matrice di test e token CSS.

Con quali strumenti di IA funziona?

È pensato per ChatGPT, Claude, Gemini e Microsoft Copilot. Non lo abbiamo ancora verificato in questi strumenti, quindi i risultati possono variare da uno all'altro.

Come personalizzo il prompt?

Clicca su «Personalizza» e compila le variabili (Prodotto o sito, Template principali, Dati sui dispositivi, Tecnologia e Contenuti prioritari su mobile). Il testo si aggiorna all'istante e poi puoi copiarlo con un clic. I valori vengono salvati solo nel tuo browser.

Serve esperienza per usarlo?

È di livello intermedio: conviene conoscere l'argomento per fornire un buon contesto e valutare il risultato con occhio critico.

Questo prompt è gratuito?

Sì. Tutti i prompt di HomeCasa Prompts sono gratuiti, senza registrazione né abbonamento. Puoi usarli anche in progetti professionali.

Posso fidarmi dell'output dell'IA?

Consideralo una bozza di alta qualità: verifica sempre dati, cifre e affermazioni importanti prima di pubblicare o prendere decisioni.

Prompt correlati