Generador de media queries CSS responsivas
Genera media queries CSS responsivas (breakpoints habituales), directamente en tu navegador.
Breakpoints aligned with Tailwind CSS. “min-width” = mobile-first approach (recommended).
🔒 100 % en el cliente — no se envía ningún dato
Genera media queries CSS responsivas con breakpoints habituales (móvil, tablet, escritorio) en unos pocos clics. Copia código listo para usar en tus diseños adaptables. Todo se ejecuta 100% en el navegador, sin instalación ni envío de datos.
What is it for?
- ▸ Crear rápidamente breakpoints para móvil, tablet y escritorio
- ▸ Adaptar la tipografía y las rejillas según el ancho de pantalla
- ▸ Gestionar la orientación del dispositivo en vertical u horizontal
- ▸ Estandarizar los breakpoints en un proyecto de equipo
FAQ
¿Cuáles son los breakpoints CSS más habituales?
Los valores clásicos son 480px para móvil, 768px para tablet, 1024px para pantallas de escritorio pequeñas y 1280px en adelante para pantallas grandes. Estos umbrales son orientativos y debes ajustarlos según tu contenido.
¿Debería usar min-width o max-width?
En un enfoque mobile-first, es preferible min-width para añadir estilos a medida que la pantalla crece. max-width encaja con un enfoque desktop-first. El generador ofrece ambos según tus necesidades.
¿Cómo se apunta a pantallas Retina en CSS?
Se usa una media query sobre la densidad de píxeles, como min-resolution: 2dppx, para servir imágenes más nítidas. Es útil para las pantallas de alta densidad de los teléfonos y portátiles recientes.