Gerador de Media Query CSS
Gere um bloco @media query CSS a partir de uma predefinição de breakpoint (ou largura personalizada) e um tipo de condição — envolve suas regras CSS em um bloco responsivo pronto para colar.
Entrada
Cole as regras CSS que deseja envolver no bloco @media — deixe como está para um comentário de espaço reservado.
Saída
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-media-query-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"breakpointPreset": "tablet",
"customWidth": "320",
"conditionType": "min-width",
"cssContent": "color: red;"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-media-query-generator` tool (CSS Media Query Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-media-query-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Media Query CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O que faz
O Gerador de Media Query CSS cria um bloco @media (...) { } pronto para colar a partir de uma largura de breakpoint e um tipo de condição. Escolha uma predefinição de dispositivo comum (ou defina uma largura de pixel personalizada), escolha se a consulta deve se aplicar acima ou abaixo dessa largura — ou mude para uma verificação de orientação — e cole as regras CSS que deseja envolver. A ferramenta atualiza a saída instantaneamente conforme você altera qualquer opção.
O que é uma media query CSS
Uma media query permite que uma folha de estilos aplique regras diferentes dependendo da largura do viewport, altura, orientação ou outras características. O formato básico é:
@media (min-width: 768px) {
/* regras que se aplicam apenas a 768px e mais largos */
}As media queries são a base do design responsivo: em vez de entregar um único layout fixo, você escreve um layout básico e depois substitui propriedades específicas quando o viewport ultrapassa um breakpoint.
Breakpoints comuns
Não há uma escala de breakpoint oficial única — diferentes frameworks (Bootstrap, Tailwind, Material Design) definem os seus próprios — mas uma escala genérica amplamente usada se parece com isto:
- Móvel — 480px (smartphones pequenos e acima)
- Tablet — 768px (tablets e laptops pequenos)
- Laptop — 1024px (laptops e monitores desktop pequenos)
- Desktop — 1280px (monitores desktop padrão e acima)
Escolha "Personalizado" se seu projeto usar uma escala diferente desta.
Como usar
- Escolha uma Predefinição de Breakpoint (Móvel, Tablet, Laptop, Desktop) ou selecione Personalizado e digite sua própria largura em pixels.
- Escolha um Tipo de Condição:
- Min-width — mobile-first, se aplica no breakpoint e mais largo.
- Max-width — desktop-first, se aplica no breakpoint e mais estreito.
- Orientação: retrato/paisagem — se aplica com base na orientação do viewport em vez de sua largura (o breakpoint é ignorado para estes).
- Cole as regras CSS que deseja envolver em CSS para envolver — deixe o comentário de espaço reservado se você apenas quiser o shell
@mediavazio. - Copie ou baixe o bloco gerado da saída e cole em sua folha de estilos.
FAQ
Qual é a diferença entre min-width e max-width?
min-width é "mobile-first": você escreve estilos básicos para telas pequenas, depois adiciona sobrescrituras que entram em efeito quando a tela tem pelo menos a largura do breakpoint. max-width é "desktop-first": a sobrescrita se aplica quando a tela tem no máximo a largura do breakpoint — a abordagem mais tradicional antes de mobile-first se tornar comum.
Posso combinar min-width e max-width para um intervalo?
Esta ferramenta gera uma condição de cada vez. Para um intervalo (por exemplo "apenas entre 768px e 1023px"), gere a versão max-width em 1023px e a versão min-width em 768px e combine manualmente com and:
@media (min-width: 768px) and (max-width: 1023px) { ... }.
Por que o campo de breakpoint não faz nada quando escolho orientação? As consultas de orientação respondem à taxa de aspecto do viewport, não à sua largura, portanto o valor do breakpoint não faz parte da condição gerada — apenas a escolha de retrato/paisagem importa.
Esta ferramenta armazena ou carrega algo? Não. Tudo é executado localmente no seu navegador — o CSS que você cola nunca sai do seu dispositivo.