Gerador de Media Query de Viewport
Gere media queries CSS para design responsivo da web.
Configurações de Media Query
Configure as condições da media query
Condição 1
Predefinições
Escolha padrões de media query comumente usados
CSS Gerado
@media screen and (max-width: 768px) {
/* Your CSS rules here */
}Pontos de Interrupção Comuns
Móvel:
max-width: 480pxTablet:
481px - 768pxDesktop:
min-width: 1024pxDesktop Grande:
min-width: 1200pxGuia de Media Query
Recursos de Mídia Chave
- • largura/altura: Largura/altura da viewport
- • largura mínima/máxima: Condições de largura mínima/máxima
- • orientação: Orientação da tela (retrato/paisagem)
- • resolução: Resolução da tela (telas retina, etc.)
- • hover: Suporte à capacidade de passar o mouse
- • ponteiro: Precisão do ponteiro (toque/mouse)
Dicas de Uso
- • Abordagem Mobile First: Use min-width para projetar a partir de telas pequenas
- • Combine condições complexas com operadores lógicos
- • Use o tipo de mídia de impressão para estilos de impressão separados
- • Use a resolução para suporte a telas de alta resolução