Generador de media queries CSS (breakpoints)

Generador de media queries CSS (breakpoints): para qué sirve

Las media queries hacen que el layout cambie según la pantalla. Este generador arma el esqueleto del CSS con los breakpoints de Bootstrap 5 (576, 768, 992, 1200 y 1400 px), de Tailwind (640, 768, 1024, 1280 y 1536 px), un conjunto simple o los tuyos.

Elige mobile-first (min-width), desktop-first (max-width, con el ajuste de 0,02 px que usa Bootstrap) o rangos, en px o em, y agrega consultas para modo oscuro, menos movimiento, mouse o toque, orientación, impresión y contraste alto. Cambia el tamaño de la ventana para ver qué media queries se están cumpliendo.

Cómo usar

1. Elige los breakpoints y el enfoque.
2. Marca las consultas adicionales.
3. Copia o descarga el CSS.

Cuándo usar

• Empezar el CSS de un sitio nuevo.
• Estandarizar los breakpoints del equipo.
• Aprender cómo funcionan las media queries.

Preguntas frecuentes

¿Mobile-first o desktop-first?

Mobile-first es lo más usado hoy: el CSS base es el del celular y cada min-width agrega ajustes para pantallas mayores. Así el celular, que suele tener conexión y procesador más débiles, lee menos reglas. Desktop-first (max-width) hace lo contrario y es útil para adaptar sitios antiguos.

¿Qué breakpoints usar?

Los de Bootstrap 5 son 576, 768, 992, 1200 y 1400 px; los de Tailwind son 640, 768, 1024, 1280 y 1536 px. En lugar de copiar un framework es mejor poner el breakpoint donde se rompe tu layout, pero los dos conjuntos son buenos puntos de partida.

¿Por qué usar em en las media queries?

En las media queries, 1em equivale al tamaño de fuente predeterminado del navegador (normalmente 16 px). Si la persona aumentó la fuente predeterminada, los breakpoints en em la acompañan y el layout cambia en el punto correcto, algo que no ocurre con px.

¿Es gratis de verdad?

Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.

Herramientas similares