Constructor de Media Queries CSS - Generador de Puntos de Quiebre Responsivos

Construye y genera media queries CSS de forma visual para diseño web responsivo

Herramientas CSS

Tool

BreakpointQuery TypeMedia Type

CSS Rules

Generated CSS

@media screen and (min-width: 768px) {
  .container {
    padding: 1rem;
  }
}

Live Preview

Resize your browser to see the breakpoint at ≥ 768px

320px

480px

768px

1024px

1280px

Highlighted widths fall within the media query range.

Cómo usar

1Selecciona el tipo de medio (screen, print, all)
2Elige un preset de punto de quiebre o ingresa valores personalizados de ancho mínimo/máximo
3Agrega las reglas CSS para aplicar dentro de la media query
4Copia el código de media query generado

Preguntas frecuentes

Las media queries CSS te permiten aplicar diferentes estilos basados en características del dispositivo como el ancho de pantalla, la altura o la orientación. Son la base del diseño web responsivo.

Los puntos de quiebre comunes incluyen 320px (móvil pequeño), 480px (móvil), 768px (tablet), 1024px (laptop) y 1280px (escritorio). También puedes usar los puntos de quiebre de frameworks populares como Tailwind CSS o Bootstrap.