HomeCasa Prompts

Estratégia de breakpoints e grelha responsiva para um site ou app

Define breakpoints guiados pelo conteúdo, uma grelha por intervalo de largura, o comportamento de cada modelo de página, container queries, imagens responsivas, matriz de testes e tokens CSS. Pensado para ChatGPT, Claude, Gemini e Microsoft Copilot. Inclui 5 variáveis personalizáveis e pode copiá-lo gratuitamente com um clique.

Intermédio · Texto · Pendente de revisão editorial

Pensado para:

Prompt

Atua como designer de produto e programador front-end especializado em design responsivo.

Contexto:
- Produto ou site: {{produto}}
- Modelos de página principais: {{modelos}}
- Dados de dispositivos e larguras de ecrã: {{dispositivos}}
- Tecnologia: {{tecnologia}}
- Conteúdo prioritário em ecrãs pequenos: {{prioridade}}

Entregáveis:
1. Abordagem: porque definir breakpoints onde o conteúdo se quebra e não por modelos de dispositivo, e se faz sentido começar pelo telemóvel.
2. Proposta de 3 a 5 breakpoints justificados, em px e em.
3. Grelha por intervalo: colunas, medianizes, margens laterais e largura máxima do conteúdo.
4. Tabela de comportamento por modelo e breakpoint: navegação, cabeçalho, grelhas de cartões, tabelas, formulários, imagens e barras laterais.
5. Componentes que devem usar container queries em vez de media queries, com exemplos.
6. Tipografia e espaçamento fluidos com clamp(), coerentes com os breakpoints.
7. Imagens: srcset e sizes, direção de arte com picture e formatos modernos.
8. Diferenças entre toque e ponteiro: media queries hover e pointer, tamanhos das áreas de toque.
9. Matriz de testes: larguras-chave, zoom a 400 % e reflow a 320 px CSS (WCAG 1.4.10), orientação e texto ampliado.
10. Tokens e código de exemplo para a tecnologia indicada.

Restrições:
- Não inventes dados de analítica; se faltarem, usa [PREENCHER: percentagem real de visitas por largura] e explica como os obter.
- Dá prioridade ao que o utilizador precisa no telemóvel; nunca escondas conteúdo essencial.
- Se faltar informação essencial sobre os modelos, pergunta-me primeiro.

Formato: títulos numerados, tabelas para a grelha e o comportamento, e blocos de código.

Como utilizar

  1. Indica os teus modelos principais e, se os tiveres, os dados reais de larguras de ecrã. 2. Revê a tabela de comportamento com design e desenvolvimento. 3. Leva os tokens para o código e corre a matriz de testes em cada modelo.

Exemplo de utilização

Produto: site de uma cadeia de hotéis urbanos · Modelos: início, listagem, página do hotel, reserva · Tecnologia: Tailwind · Prioridade: datas e preço.

Exemplo de resultado

1. Abordagem

Mobile first, com breakpoints onde o conteúdo parte (por exemplo, quando o cartão do hotel já não cabe numa coluna), e não por modelos de dispositivo. Dados de utilização: [PREENCHER: percentagem de visitas por largura de ecrã]; obtêm-se na ferramenta de analítica agrupando por largura da janela.

3. Grelha

IntervaloColunasGutterMargemLargura máx.
< 640 px (40em)416 px16 px100 %
640-1023 px824 px24 px100 %
1024-1279 px1224 px32 px100 %
≥ 1280 px (80em)1232 pxauto1200 px

4. Comportamento da página do hotel

  • Telemóvel: seletor de datas, preço por noite e «Reservar» numa barra fixa em baixo; nunca escondidos.
  • Desktop: cartão de reserva fixo na coluna da direita (4 de 12).

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

Breakpoints em em respeitam o zoom de texto do navegador…

Dados-chave

Categoria
Design UI/UX · Design responsivo
Tipo de resultado
Texto
Nível
Intermédio
Pensado para
ChatGPT, Claude, Gemini e Microsoft Copilot
Verificado em
Pendente de verificação editorial
Variáveis
Produto ou site, Modelos principais, Dados de dispositivos, Tecnologia e Conteúdo prioritário no telemóvel
Idioma
Português
Preço
Gratuito, sem registo
Atualizado
07/11/2026

Perguntas frequentes

Devo usar os breakpoints do meu framework CSS?

São um bom ponto de partida, mas convém ajustá-los aos pontos onde o teu conteúdo se quebra de facto. O prompt diz-te se os valores predefinidos servem ou se precisas de acrescentar ou mover algum.

O que são container queries e quando usá-las?

Permitem que um componente mude consoante a largura do seu contentor e não do ecrã. São úteis para cartões ou widgets que aparecem em colunas de larguras diferentes.

Para que serve este prompt?

Define breakpoints guiados pelo conteúdo, uma grelha por intervalo de largura, o comportamento de cada modelo de página, container queries, imagens responsivas, matriz de testes e tokens CSS.

Com que ferramentas de IA funciona?

Foi pensado para ChatGPT, Claude, Gemini e Microsoft Copilot. Ainda não o verificámos nestas ferramentas, pelo que os resultados podem variar entre elas.

Como personalizo o prompt?

Clique em “Personalizar” e preencha as variáveis (Produto ou site, Modelos principais, Dados de dispositivos, Tecnologia e Conteúdo prioritário no telemóvel). O texto atualiza-se instantaneamente e pode depois copiá-lo com um clique. Os valores ficam guardados apenas no seu navegador.

Preciso de experiência para o utilizar?

É de nível intermédio: convém conhecer o tema para fornecer bom contexto e rever o resultado com sentido crítico.

Este prompt é gratuito?

Sim. Todos os prompts do HomeCasa Prompts são gratuitos, sem registo nem subscrição. Pode também utilizá-los em projetos profissionais.

Posso confiar no resultado da IA?

Trate-o como um rascunho de qualidade: verifique sempre os dados, os números e as afirmações importantes antes de publicar ou tomar decisões.

Prompts relacionados