1
Breakpoints de media queries
Detecta cambios de layout activados por breakpoints de media query, asegurando consistencia en todos los anchos de viewport.
20 casos de prueba
Responsive
El diseno responsive garantiza que su sitio funcione en todos los tamanos de pantalla. Un breakpoint roto puede hacer su pagina inutilizable en ciertos dispositivos. Delta-QA prueba sus layouts en multiples tamanos de viewport.
Lo que detectamos
2
Container queries
Monitorea reglas @container que adaptan el estilo de componentes segun las dimensiones del padre.
3
Layouts dependientes del viewport
Captura cambios en elementos con unidades de viewport (vw, vh, dvh, svh) y dimensionamiento relativo.
4
Imagenes responsive
Rastrea cambios en dimensionamiento de imagenes, aspect-ratio y renderizado srcset entre breakpoints.
Ejemplo interactivo
Vea exactamente lo que Delta-QA detecta. Compare las dos versiones lado a lado.
Antes
Despues
Escenarios reales
🎯
La grilla que se apila mal en tablet
Un desarrollador cambia el breakpoint responsive de 768px a 480px. En desktop y móvil (375px), todo pasa bien. Pero en tablet (768px), las 3 columnas de features quedan aplastadas — el texto es ilegible, las imágenes se superponen. Tus visitantes en iPad ven un sitio roto. El tester revisó en desktop y móvil, no en los tamaños intermedios. Delta-QA captura el sitio en cada breakpoint y compara las capturas: las columnas aplastadas y las superposiciones en tablet resaltan en el diff.
⚠️
El menú hamburguesa que no se abre
El menú móvil (hamburguesa) funciona perfectamente a 375px. Pero a 820px (iPad), se muestra el menú desktop... excepto que desborda la pantalla porque está diseñado para 1024px mínimo. Los elementos del menú están cortados, tus visitantes en iPad no pueden navegar. Revisar manualmente cada componente en cada breakpoint es irreal. Delta-QA captura el sitio a 820px y compara las capturas: el menú que desborda la pantalla salta a la vista de inmediato en el diff.
💡
El texto que se vuelve demasiado pequeño
Un desarrollador ajusta una media query y el font-size móvil (14px) ahora se aplica hasta 1024px en vez de 768px. En un laptop, todo el texto queda ligeramente pequeño — los visitantes entrecierran los ojos sin entender por qué. El desarrollador testeaba en su pantalla de 1440px, todo se veía bien de su lado. Delta-QA captura el sitio a 1024px y compara las capturas: el texto encogido y los desajustes de maquetación resultantes resaltan en la superposición.
¿Listo para detectar cada regresion visual?
Descarga Delta-QA y empieza a detectar cambios CSS en tus paginas web — sin codigo.