UTILS.
100% en el navegador
@

Generador de media queries CSS

Crea una @media query responsiva con ajustes predefinidos y cópiala.

Acerca de esta herramienta

Compón una @media query responsiva eligiendo min-width, max-width o un rango más orientación, con ajustes predefinidos de dispositivo con un clic, luego copia el contenedor. Todo se ejecuta en tu navegador.

Preguntas frecuentes

¿Cuál es la diferencia entre min-width y max-width?
min-width aplica los estilos a ese ancho y superiores (mobile-first), mientras que max-width los aplica a ese ancho e inferiores.
¿Cómo funcionan los ajustes predefinidos de dispositivo?
Cada ajuste rellena los puntos de quiebre típicos — móvil hasta 767px, tableta de 768 a 1023px y escritorio desde 1024px — que luego puedes afinar.

Más herramientas