Generador de media queries

Funciones

• Breakpoints de anchura: `min-width`, `max-width` y rangos
• ⚠️ El límite superior de un rango se reduce en 0,02 para empalmar exactamente con el siguiente `min-width`, sin dejar un tramo que no cubra nadie
• ⚠️ Si los dos números van al revés se corrigen solos, sin producir una consulta que nunca coincida
• Preferencias: modo oscuro y claro, menos movimiento, más contraste
• Dispositivos: orientación, si admite hover y si la entrada principal es táctil
• Impresión
• Vista previa en vivo (muestra el efecto de las declaraciones del bloque)
• ⚠️ La entrada del modo oscuro aclara que no significa «ahora en oscuro»; la de menos movimiento, que no detiene las animaciones sola
• Copia el bloque `@media … { }` completo

Cómo se usa

1. Elige una condición
2. Para las de anchura, fija el breakpoint; para un rango, también el límite superior
3. Copia el texto de la derecha y cambia el selector y las declaraciones por los tuyos

Preguntas frecuentes

¿Por qué max-width es 767.98px y no 767px?

Para que los rangos empalmen exactamente. `max-width: 767px` y `min-width: 768px` dejan `767px ~ 768px` cubierto por ninguna de las dos reglas, y entonces los estilos fallan en ciertas anchuras de ventana sin motivo visible. Ese hueco es real: un zoom del 110%, una relación de píxeles no entera o un diseño calculado con `clamp()` producen anchuras de ventana fraccionarias. Restar 0,02 es la práctica establecida (es lo que hace Bootstrap): menor que cualquier entero y mayor que la primera fracción después de 767,98.

¿Por qué no se aplica prefers-color-scheme: dark?

Porque significa «el usuario ha expresado preferencia por el oscuro», no «el usuario está en oscuro». Cuando alguien nunca ha fijado una preferencia de tema, la consulta no coincide, así que una página que solo escribe estilos bajo `dark` se le aparece en blanco con el texto oscuro, es decir, con tus estilos base. Lo correcto es escribir los estilos claros por defecto y sobrescribirlos dentro de `dark`, no tomar el oscuro como predeterminado y meter el claro en una consulta `light`. Ese segundo enfoque deja a quien no ha dicho nada con algo que no está diseñado ni para un modo ni para el otro.

He puesto prefers-reduced-motion y las animaciones siguen. ¿Por qué?

Porque la consulta no hace nada por sí sola: es solo una condición que te dice que el usuario pide menos movimiento. Para que surta efecto hay que desactivar cosas dentro: `animation: none;`, `transition: none;` o una duración casi nula. Un bloque `@media (prefers-reduced-motion: reduce) { }` vacío es lo mismo que no escribirlo, pero en el código parece que ya está resuelto: ese es el mal uso más frecuente de esta característica.

¿Uso min-width o max-width?

Prefiere `min-width` (diseño desde el móvil). El motivo no es de estilo, sino de cascada: una regla `min-width` escrita después sobrescribe con naturalidad la anterior, así que añadir un breakpoint es solo añadir al final; las reglas `max-width` hay que insertarlas en el sitio correcto y se enredan a medida que se acumulan. Y escribir primero los estilos base para el teléfono y luego añadir para pantallas grandes te obliga a enfrentarte a lo que no cabe en una pantalla pequeña: es más fácil acertar así que haciendo la versión de escritorio y luego intentando meterla en un móvil.

¿Puede una media query saber si el usuario está en un dispositivo táctil?

De forma fiable, no: solo puedes preguntar lo correcto. `(pointer: coarse)` pregunta si la entrada principal es basta (un dedo) y `(hover: hover)` si se puede pasar el ratón por encima. Pero en dispositivos híbridos (un portátil con pantalla táctil, una tableta con ratón conectado) las dos respuestas pueden ser ciertas a la vez, y el usuario cambia de método de entrada cuando quiere. Así que no las uses para adivinar el dispositivo, sino para mejorar cuando existe la capacidad: pon los estilos de `:hover` dentro de `@media (hover: hover)`, que es el uso exacto, porque en una pantalla táctil el concepto de pasar el ratón por encima no existe.