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.
Guías relacionadas
Aprenda el workflow detrás de esta herramienta y qué revisar después.
Checks de SEO técnico antes de enviar un sitio
Un checklist para asegurar que los buscadores puedan descubrir, rastrear, entender e indexar las páginas importantes.
Cómo depurar respuestas JSON de una API
Formatee la respuesta, confirme el estado HTTP, valide el schema y compare cambios del payload antes de modificar código.
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.
Privacidad y uso
Comprobaciones rápidas sin cuenta
Toolinix está pensado para tareas cortas de desarrollo: pegue una muestra segura, revise el resultado, copie lo necesario y continúe.
Sin inicio de sesión
Puede usar las herramientas sin crear una cuenta, suscribirse a un boletín ni guardar un espacio de trabajo.
Local cuando es posible
Los formateadores, generadores, codificadores y utilidades de texto suelen ejecutarse en el navegador. Los diagnósticos de red pueden necesitar una consulta asistida por servidor para comprobar URLs, dominios o IPs públicos.
No pegue secretos
No pegue contraseñas de producción, claves privadas, tokens de acceso, datos de clientes ni datos regulados en herramientas online salvo que su propia política de seguridad lo permita.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.