toolsmoah

Generador de Media Queries de Viewport

Genera media queries CSS para diseño web responsivo.

Configuración de Media Query
Configura las condiciones de la media query

Condición 1

Preajustes
Elige patrones de media query de uso común
CSS Generado
@media screen and (max-width: 768px) {
  /* Your CSS rules here */
}
Puntos de Ruptura Comunes
Móvil:max-width: 480px
Tableta:481px - 768px
Escritorio:min-width: 1024px
Escritorio Grande:min-width: 1200px
Guía de Media Query

Características Clave de los Medios

  • • width/height: Ancho/alto del viewport
  • • min-width/max-width: Condiciones de ancho mínimo/máximo
  • • orientation: Orientación de la pantalla (vertical/horizontal)
  • • resolution: Resolución de la pantalla (pantallas retina, etc.)
  • • hover: Soporte de capacidad de hover
  • • pointer: Precisión del puntero (táctil/ratón)

Consejos de Uso

  • • Enfoque Mobile First: Usa min-width para diseñar desde pantallas pequeñas
  • • Combina condiciones complejas con operadores lógicos
  • • Usa el tipo de medio print para estilos de impresión separados
  • • Usa resolution para soporte de pantallas de alta resolución
    Generador de Media Queries de Viewport