1
Breakpoints de media queries
Detecta mudancas de layout ativadas por breakpoints, garantindo consistencia em todas as larguras de viewport.
20 casos de teste
Responsive
O design responsivo garante que seu site funcione em todos os tamanhos de tela. Um breakpoint quebrado pode tornar sua pagina inutilizavel em certos dispositivos. O Delta-QA testa seus layouts em multiplos tamanhos de viewport.
O que detectamos
2
Container queries
Monitora regras @container que adaptam o estilo dos componentes com base nas dimensoes do pai.
3
Layouts dependentes do viewport
Captura mudancas em elementos com unidades de viewport (vw, vh, dvh, svh) e dimensionamento relativo.
4
Imagens responsivas
Rastreia mudancas no dimensionamento de imagens, aspect-ratio e renderizacao srcset entre breakpoints.
Exemplo interativo
Veja exatamente o que o Delta-QA detecta. Compare as duas versões lado a lado.
Antes
Depois
Cenários reais
🎯
O grid que empilha errado no tablet
Um desenvolvedor muda o breakpoint responsivo de 768px para 480px. No desktop e celular (375px), tudo passa. Mas no tablet (768px), as 3 colunas de features ficam esmagadas — o texto fica ilegivel, as imagens se sobrepoem. Seus visitantes no iPad veem um site quebrado. O testador verificou no desktop e no celular, nao nos tamanhos intermediarios. Delta-QA captura o site em cada breakpoint e compara as capturas: as colunas esmagadas e as sobreposicoes no tablet se destacam no diff.
⚠️
O menu hamburger que nao abre
O menu mobile (hamburger) funciona perfeitamente em 375px. Mas em 820px (iPad), o menu desktop e exibido... so que transborda a tela porque foi projetado para 1024px no minimo. Os itens do menu estao cortados, seus visitantes no iPad nao conseguem navegar. Verificar manualmente cada componente em cada breakpoint e irreal. Delta-QA captura o site em 820px e compara as capturas: o menu que transborda a tela salta a vista imediatamente no diff.
💡
O texto que fica pequeno demais
Um desenvolvedor ajusta uma media query e o font-size mobile (14px) agora se aplica ate 1024px em vez de 768px. Em um laptop, todo o texto fica levemente pequeno demais — os visitantes apertam os olhos sem entender por que. O desenvolvedor testava na tela de 1440px dele, tudo estava bem do lado dele. Delta-QA captura o site em 1024px e compara as capturas: o texto encolhido e os desajustes de layout resultantes se destacam na sobreposicao.
Pronto para detectar toda regressao visual?
Baixe o Delta-QA e comece a detectar mudancas CSS nas suas paginas web — sem codigo.