search

Found

info Descripción

Crea media queries CSS responsivas con breakpoints min-width, max-width o de rango, presets de dispositivo y rasgos como prefers-color-scheme y hover.

📘 Cómo usar

  1. Elige un tipo de breakpoint (min-width, max-width o rango)
  2. Pulsa un preset de dispositivo o escribe un valor en píxeles
  3. Marca las características de medios que necesites, como orientation
  4. Revisa el bloque @media generado y la barra de vista previa

Generador de Media Queries CSS

px 
@media (min-width: 768px) {
  /* your styles */
}
¡Copiado!
0 480 768 1024 1440 1920

grid_view Relacionados

Article

Generador de Media Queries CSS | Crea reglas @media desde breakpoints y características

Elige el tipo de breakpoint y el valor en píxeles, marca las características de medios que quieras y la herramienta arma una regla @media lista para copiar. La barra de vista previa muestra qué anchos de viewport cubre la consulta.

💡 Sobre esta herramienta

Escribir a mano @media (min-width: 768px) no cuesta nada, pero la fricción aparece al apilar condiciones: anidar paréntesis, colocar bien la palabra and y recordar si prefers-reduced-motion lleva el valor reduce o no-preference. El error clásico es una consulta de rango donde min-width y max-width se solapan por un píxel, así que ambas reglas se activan justo en el ancho límite y los estilos se duplican.

Esta herramienta ofrece tres modos de breakpoint (min-width, max-width, rango), presets de dispositivo a 375 / 768 / 1024 / 1440px, un campo de píxeles personalizado y casillas para las características de medios habituales. Escribe un bloque @media con sintaxis correcta sobre la marcha, y la barra de vista previa pinta la porción del rango 0–1920px que la consulta apunta realmente: una comprobación rápida de que no invertiste min y max.

🧐 Preguntas Frecuentes

¿Debo basar mis breakpoints en min-width o max-width? Para CSS mobile-first, usa min-width: las pantallas pequeñas son la base y vas añadiendo sobrescrituras hacia arriba. Si estás reduciendo un diseño de escritorio existente, max-width es más rápido. Los patrones Mobile First y Desktop First son plantillas de cada enfoque.

¿Cómo apunto a "solo tablet" con un rango? Fija el límite superior un píxel por debajo del siguiente breakpoint, por ejemplo min-width: 768px y max-width: 1023px. Si usas 1024px como techo, ambas consultas se activan en un dispositivo de exactamente 1024px. El patrón Tablet Only ya carga 768–1023px.

¿Puedo incluir prefers-color-scheme o hover? Sí. Marca una característica y se une a la condición de ancho, por ejemplo and (prefers-color-scheme: dark). Para apuntar al modo oscuro en cualquier ancho, pon el valor personalizado en 0 o usa el patrón Dark Mode.

¿Genera solo cadenas con and, o también or? Construye condiciones unidas con and dentro de una sola regla @media. Para un OR lógico (listas de consultas separadas por comas), genera dos reglas y colócalas juntas.

¿Admite breakpoints en em o rem? La salida está en px. Si tu equipo estandariza breakpoints en em, divide el valor px generado entre el tamaño de fuente raíz (normalmente 16px) y cambia la unidad.

📚 Datos Curiosos

Las media queries se estandarizaron en la Recomendación CSS3 Media Queries del W3C en 2012; antes, el comportamiento responsivo solía implicar medir window.innerWidth en JavaScript y alternar clases. Las características de "preferencia de usuario" como prefers-color-scheme y prefers-reduced-motion llegaron después en Media Queries Level 5, permitiendo que el CSS reaccione al modo oscuro del sistema o a un ajuste de accesibilidad sin nada de script. Cada vez más voces cuestionan los breakpoints nombrados por dispositivo: en lugar de "móvil, tablet, escritorio", colocas un breakpoint allí donde el propio contenido empieza a romperse, una idea que ha impulsado el interés por las container queries, una especificación hermana.