Cómo usar esta herramienta para desarrolladores
- Elige el tipo de condición.
- Define uno o dos breakpoints.
- Selecciona orientación o esquema de color si corresponde.
- Escribe las reglas y genera el bloque @media.
CSS Media Query Builder
Construye media queries modernas para ancho, orientación y preferencia de color. Puedes elegir min-width, max-width o un rango y envolver las reglas CSS que escribas en el bloque resultante.
Datos de entrada
Parámetros y código fuenteEspacio publicitario
Qué hace esta herramienta para desarrolladores
Compone condiciones con and y conserva las reglas CSS internas sin modificar su contenido.
Los rangos usan min-width y max-width para ofrecer una sintaxis ampliamente reconocible y fácil de integrar.
La herramienta genera la consulta; no comprueba si tus reglas internas seleccionan elementos existentes.
Ejemplo
@media (min-width: 768px) and (max-width: 1199px) {
.sidebar { display: block; }
}
Casos de uso
- Breakpoints responsive.
- Layouts por orientación.
- Estilos de modo oscuro.
- Ajustes específicos de ventana.
Consejos para obtener resultados fiables
- Define breakpoints según el contenido, no solo por dispositivos.
- Evita rangos que se solapen sin intención.
- Usa prefers-color-scheme como preferencia, no como identidad del usuario.
- Comprueba la consulta en DevTools.
Detalles del procesamiento
Las condiciones seleccionadas se concatenan de forma determinista y los anchos se expresan en px.
No incluye media types antiguos ni características experimentales del navegador.
Preguntas frecuentes
¿Cómo genero una media query entre dos anchos?
Selecciona el modo rango e introduce el mínimo y el máximo; se combinarán con and.
¿Puedo crear una media query solo para modo oscuro?
Sí. Selecciona la condición prefers-color-scheme y el valor dark.
¿Es mejor min-width o max-width para responsive?
Depende de la estrategia del proyecto. min-width suele encajar con mobile-first; max-width puede ser útil en ajustes descendentes.
¿Las media queries deben usar breakpoints de dispositivos concretos?
No. Es preferible elegir puntos donde el contenido realmente necesita cambiar de layout.
¿La herramienta valida las reglas CSS dentro del bloque?
No de forma completa; envuelve el texto que proporcionas y valida principalmente la configuración de la consulta.
Herramientas relacionadas para desarrolladores
Resumen del resultado
| Módulo | Función |
|---|---|
| Entrada | Parámetros configurables |
| Salida | Código listo para copiar |
| Validación | Comprobaciones locales en el navegador |