También disponible en: English · Português · Français · العربية
Generador de media queries: breakpoints que no se solapan
Genera breakpoints en cuatro formas distintas y mira el intervalo exacto que deja sin cubrir cada una.
¿Qué es un breakpoint de media query?
Un breakpoint es la anchura de ventana a la que cambia un diseño. En CSS se expresa con una media query, casi siempre con una pareja de ellas —una para el caso estrecho y otra para el ancho—, y todo el diseño responsive descansa en que esas dos consultas se repartan limpiamente el eje de anchuras.
No se lo reparten. Media Queries nivel 4 define los dos prefijos con exactitud: min- equivale al operador >= y max- equivale a <=. Los dos incluyen el valor que escribiste. Así que (max-width: 600px) y (min-width: 600px) son ciertas a la vez en exactamente 600 píxeles, y el navegador lo resuelve aplicando la regla que venga después: en silencio, y de forma distinta según el orden de tu hoja de estilos.
Este generador toma una lista de breakpoints y escribe las consultas de cuatro maneras, indicando en cada caso si la frontera es exacta, se solapa o deja un hueco, y —cuando deja un hueco— el intervalo preciso de anchuras que no cumple ninguna de las dos.
Cómo se usa
- Escribe tus breakpoints separados por comas o espacios. Un número suelto toma la unidad elegida al lado; escribe 40rem para cambiarla en un valor concreto. Los botones de ejemplo cargan los breakpoints de Bootstrap, los de Tailwind y las dos formas exactas.
- Elige cómo debe escribirse la consulta por debajo del breakpoint. Cuatro opciones: la sintaxis de rango, la forma negada, restar 0,02 o restar una unidad entera. La tabla de abajo se actualiza con lo que hace cada una en la frontera, y la nota de encima dice qué herramienta real ha tomado esa decisión.
- Comprueba el último panel contra tu propio navegador. Pasa las consultas generadas a matchMedia y muestra en vivo lo que responde tu ventana. Haz zoom y los números se mueven: el zoom es la forma más fácil de darte una anchura fraccionaria, que es justo el caso que se le escapa a un breakpoint con margen.
Por qué un breakpoint con margen no puede estar bien
Como min- es >= y max- es <=, las dos consultas que uno escribe alrededor de un breakpoint son un par de semirrectas cerradas. Dos semirrectas cerradas no pueden repartirse una recta. O comparten su extremo, y entonces alguna anchura cumple las dos, o las separas, y entonces un intervalo abierto entre ellas no cumple ninguna. No hay un tercer caso ni una elección de valores que se libre.
El propio estándar lo dice, y es inusualmente franco sobre el remedio. Su nota observa que los autores desplazan los valores para que las dos consultas no sean ciertas a la vez, y a continuación señala que emparejar 320 con 321 «no tiene en cuenta la posibilidad de anchuras de ventana fraccionarias», y describe la versión mejorada con 320,01px como algo que «reduce significativamente la probabilidad de que la anchura de un dispositivo se cuele por la rendija». Eso es una probabilidad, con las palabras del propio estándar, no una solución.
Las cuatro estrategias de aquí son las cuatro respuestas reales, y todos los tamaños de hueco están medidos sobre un artefacto publicado, no sacados de la documentación. La hoja de estilos de Bootstrap 5.3.3 empareja (min-width: 576px) con (max-width: 575.98px): un hueco de 0,02px. postcss-media-minmax, el conversor canónico de la sintaxis de rango a los prefijos antiguos, convierte (width < 600px) en (max-width: 599px) —un hueco de un píxel entero— y su margen ni siquiera es constante: dale 37.5rem y resta una milésima en lugar de una unidad.
Las dos formas exactas, y en qué se diferencian
La sintaxis de rango lo arregla de verdad, porque tiene comparaciones estrictas que a los prefijos les faltan. (width < 600px) junto a (width >= 600px) cubre cada anchura exactamente una vez, incluida la de 600. Es lo que emite Tailwind v4: su variante md: se compila a (width >= 48rem) y su variante max-md: a (width < 48rem).
Hay una segunda forma exacta, y es más antigua que la primera. Negar una consulta inclusiva da una estricta: not all and (min-width: 600px) es cierta justo cuando la anchura está por debajo de 600, y esa forma es válida desde Media Queries 3, así que llega a navegadores que nunca aprendieron la sintaxis de rango. El optimizador de Tailwind reescribe sus consultas de rango exactamente a esto, y Lightning CSS hace lo mismo: por eso el CSS compilado que circula parece usar los viejos prefijos inclusivos cuando en realidad la consulta inferior es una negación.
Ahora bien, las dos no son intercambiables, y ningún conversor lo menciona. La sección 2.4 de esa misma especificación dice que una característica que nombra un concepto que el dispositivo no tiene «debe evaluarse siempre como falsa». Un navegador de voz no tiene anchura, así que allí (width < 600px) es falsa, mientras que not all and (min-width: 600px) niega un falso y sale cierta. Coinciden en todo medio visual y discrepan en el resto.
Límites honestos
El hueco que deja un margen es real pero estrecho, y en una pantalla donde toda anchura de ventana es un número entero de píxeles CSS nunca caerás dentro. Lo que produce anchuras fraccionarias es el zoom del navegador, una densidad de píxel que no es entera y una barra de desplazamiento que se lleva una fracción: por eso el panel en vivo te invita a hacer zoom en lugar de afirmar cada cuánto ocurre. Esta página no publica ninguna frecuencia a propósito: lo honesto es el intervalo exacto y una forma de comprobarlo tú, no un porcentaje cuya población me habría tenido que inventar.
La herramienta compara además solo las características width y height. Los prefijos valen para cualquier característica de tipo rango —resolution, aspect-ratio, color— y la aritmética es la misma en todas, pero es en la anchura donde la pregunta surge de verdad. Las características discretas como pointer u orientation no admiten prefijo, y eso lo dice el estándar sin rodeos.
Por último, el CSS generado es un esqueleto: dos bloques de media por breakpoint con una regla vacía dentro. Está pensado para pegarlo y rellenarlo, no para ser una hoja de estilos. Y merece la pena mirar antes la escalera mobile-first de más abajo: escribir solo la consulta min- por breakpoint y dejar que cada regla pise a la anterior esquiva el problema entero, porque la segunda consulta no llega a escribirse.
¿Por qué es gratis?
Es aritmética sobre un puñado de números más el matchMedia de tu propio navegador, y todo ocurre en esta pestaña mientras escribes. No interviene ningún servidor, así que no hay nada que medir ni cuenta que crear.
No se sube nada. Los breakpoints que escribas se quedan en tu máquina.