Generador de Media Query CSS
Opciones de Media Query
Vista previa en vivo
Acerca de este generador de Media Queries CSS
Esta herramienta le ayuda a crear media queries CSS responsivas sin escribir toda la sintaxis a mano. Elija breakpoints, orientación, esquema de color, preferencia de movimiento y soporte para hover.
Es útil para crear tarjetas, diseños, bloques de navegación, estilos de modo oscuro y reglas de movimiento reducido amigables con la accesibilidad.
como usarlo
- Elija un tipo de medio como pantalla, impresión o todo.
- Establezca puntos de interrupción de ancho mínimo o máximo para su diseño responsivo.
- Opcionalmente, agregue orientación, esquema de color, movimiento reducido o condiciones de hover.
- Escriba el bloque CSS que debe aplicarse dentro de la media query.
- Copie el bloque @media generado en su hoja de estilo.
Consejos
- Utilice `max-width` para ajustes mobile-first cuando apunte a pantallas más pequeñas.
- Utilice `min-width` para layouts progresivos que crecen desde móvil hasta escritorio.
- Utilice prefers-reduced-motion para reducir las transiciones y animaciones para los usuarios que lo soliciten.
- Utilice el esquema de color preferido para estilos simples en modo oscuro y modo claro.
Comprobaciones de media queries antes de añadir un breakpoint
Las media queries deben responder al contenido y capacidades del usuario, no solo a anchos típicos de dispositivos.
Usa breakpoints del contenido
Añade un breakpoint donde el layout deja de funcionar, no para una marca concreta de móvil, tablet o escritorio.
Evita huecos en límites
Prueba valores exactos y usa una sintaxis de rangos consistente para no excluir anchos fraccionarios.
Respeta preferencias
Revisa prefers-reduced-motion, esquema de color, contraste, forced colors y capacidades de entrada.
Prueba viewports reales
Comprueba orientación, zoom, interfaz del navegador, ventanas divididas, vistas embebidas y traducciones largas.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.