Generador de Media Query CSS
Opciones de Media Query
Consulta
Funciones multimedia
CSS dentro de la consulta de medios
Estado
inactivo
Vista previa en vivo
Media query preview
Item 1
Item 2
Item 3
Item 4
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.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.
Generador de cuadrícula CSS
Cree diseños de cuadrícula CSS con columnas, filas, espacios, alineación, vista previa en vivo y CSS listo para copiar.
Utilidades varias
›
Generador CSS Flexbox
Cree diseños CSS flexbox con vista previa en vivo, controles de alineación, ajuste, dirección, espacio y CSS listo para copiar.
Utilidades varias
›
Generador de Container Query CSS
Genere container queries CSS con `container-type`, `container-name`, reglas de breakpoint y declaraciones responsivas.
Utilidades varias
›
Generador de patrones de fondo CSS
Cree patrones de fondo CSS con puntos, cuadrículas, rayas, líneas diagonales y tableros de ajedrez.
Utilidades varias
›
Preguntas frecuentes
¿Qué es una media query CSS?
Una media query CSS aplica estilos solo cuando el navegador o el dispositivo cumple ciertas condiciones, como el ancho de pantalla o el esquema de color.
¿Debo usar `min-width` o `max-width`?
Utilice `min-width` para layouts mobile-first y `max-width` cuando quiera apuntar directamente a pantallas más pequeñas.
¿Las media queries pueden detectar el modo oscuro?
Sí. La media feature `prefers-color-scheme` permite adaptarse a las preferencias de modo oscuro o claro.
¿Las media queries pueden mejorar la accesibilidad?
Sí. `prefers-reduced-motion` permite reducir o eliminar animaciones para usuarios que prefieren menos movimiento.