CSS Container Query
Generator
Construa visualmente container queries @container com GUI. Configurações de container-type, breakpoints, 6 presets e conversor de media query. Sem registro.
Configurações do Contêiner
Presets
Breakpoints
Preview ao Vivo
Código Gerado
🔄 Media Query → Container Query
Você também pode gostar
Sobre o Gerador Container Query CSS
O Gerador Container Query CSS é uma ferramenta para desenvolvedores construírem visualmente "container queries", o novo padrão em design responsivo, usando uma GUI. Enquanto media queries dependem da largura da tela, container queries dependem da largura do elemento pai, permitindo layouts flexíveis por componente.
Esta ferramenta lida perfeitamente com configurações de container, adição de breakpoints e previews. Também converte media queries existentes para a nova especificação. Tudo roda com segurança no seu navegador.
Como Usar
Configurar e Adicionar Breakpoints
Defina o seletor do contêiner e container-type (geralmente inline-size). Em seguida, "Adicionar Breakpoint" e insira os estilos CSS para aplicar quando o contêiner atingir um tamanho específico.
Preview ao Vivo
Arraste a borda direita da área de preview para redimensionar o contêiner e verificar se os estilos mudam corretamente. Você pode testar com HTML personalizado.
Exportar e Converter
Copie o código CSS gerado. Use o "Conversor de Media Query" para substituir facilmente a sintaxe existente de @media por @container, economizando esforço.
Glossário Container Query
- Container Query (@container)
- Recurso CSS para alterar estilos com base no tamanho de um elemento pai.
- container-type
- Propriedade que define um contêiner (inline-size ou size).
- container-name
- Nomeia explicitamente um contêiner.
- Containment
- Isola os cálculos de layout/estilo de um elemento do resto do DOM.
- Eixo Inline
- O eixo onde o texto flui (largura em escrita horizontal).
- Media Query (@media)
- Recurso que aplica estilos com base no tamanho da janela do navegador.
- cqw / cqh / cqi / cqb
- Unidades relativas baseadas nas dimensões do contêiner (1%).
Perguntas Frequentes
- Q.Os dados são enviados para um servidor?
- Não. Esta ferramenta roda 100% no seu navegador.
- Q.Devo usar media queries ou container queries?
- Use media queries para layouts globais (cabeçalhos) e container queries para componentes (cartões) que se otimizam com base no espaço disponível.
- Q.Qual a compatibilidade dos navegadores?
- Suportado em navegadores modernos desde 2023 (Chrome 105+, Safari 16+, Firefox 110+).
- Q.Cuidados ao usar container-type: size?
- Se usar size, deve-se definir uma altura explícita, caso contrário, o elemento pode colapsar para altura zero.
- Q.Como o HTML personalizado é isolado?
- Usamos Shadow DOM para garantir que o CSS do gerador não interfira na sua marcação.
Casos de Uso
Cartões Reutilizáveis
Perfeito para criar cartões que se adaptam a áreas principais ou barras laterais.
Integração com CMS
Crie blocos no WordPress que ajustam automaticamente seu layout independentemente da largura da área.
Dashboards Complexos
Ideal para otimizar dinamicamente gráficos em painéis redimensionáveis.
Modernização de Código
Converta blocos massivos de media query para container queries.
Documentação Técnica
As Container Queries CSS são alcançadas combinando a regra @container e a propriedade container-type.
Diferença de Media Queries
Media queries mudam estilos com base na tela inteira. Container queries mudam estilos com base no contêiner pai, aplicando o layout correto automaticamente em diferentes contextos.
Valores de container-type
inline-size permite consultas no eixo horizontal. size consulta ambos os eixos, mas requer contenção de altura. normal é o padrão.
Enviar feedback
Deixe-nos saber sua opinião para nos ajudar a melhorar a ferramenta.
O feedback está temporariamente suspenso
O servidor está ocupado ou a proteção contra spam está ativa. Tente novamente mais tarde.