Generador de media queries CSS
Genera bloques de media queries CSS mobile-first o desktop-first a partir de presets Bootstrap, Tailwind o puntos de quiebre personalizados.
Generador de media queries CSS
Elige una escala de puntos de quiebre y esta herramienta escribe los bloques @media correspondientes, listos para pegar en tu hoja de estilos. Selecciona los presets de Bootstrap o Tailwind para reutilizar los puntos de quiebre que esos frameworks incluyen, o cambia a Personalizado e ingresa tus propios anchos como lista separada por comas o saltos de línea — números simples como "480, 768, 1024" se nombran automáticamente, o empareja cada uno con una etiqueta como "tablet:768".
La salida mobile-first se propaga hacia arriba solo con min-width, el patrón en el que se escribe la mayoría del CSS de componentes hoy; desktop-first se propaga hacia abajo solo con max-width, el punto de quiebre más grande primero. Activa la sintaxis de rango para acotar cada punto de quiebre en ambos lados — cada bloque se aplica solo en ese nivel, con el nivel superior sin límite superior. Los anchos se imprimen en px, em o rem, asumiendo el tamaño común de fuente raíz de 16px para la conversión. Cuatro controles adicionales añaden consultas independientes para orientación, punteros con capacidad de hover, prefers-color-scheme y prefers-reduced-motion, útiles cuando una página necesita esas verificaciones junto con sus puntos de quiebre de diseño. Cambia el formato de salida a SCSS y cada bloque se convierte en un @mixin nombrado con @content en su lugar, para que tu compilación Sass pueda @include en cualquier lugar donde se necesite la regla.
Una lista de puntos de quiebre que no se resuelve en nada utilizable — vacía, o cada entrada no numérica — se reporta claramente en lugar de producir CSS roto; los anchos duplicados colapsan en un bloque, manteniendo su primer nombre. Las listas personalizadas muy largas se limitan para que pegar un valor enorme o mal formado nunca congele la pestaña.
Todo se ejecuta localmente en tu navegador — nada de lo que escribas se carga en ningún lugar. Copia el resultado, descárgalo como archivo .txt, o envíalo directamente a la entrada de otra herramienta para continuar trabajando en él.