Generador de media queries CSS
Elige las condiciones que necesitas y obtén una regla @media limpia, con una comprobación en vivo que muestra si coincide con tu pantalla actual. O elige un framework para obtener un esqueleto completo de breakpoints mobile-first o desktop-first.
Última actualización:
Cómo usar Generador de media queries CSS
- Elige un modo: Consulta personalizada para crear una regla o Breakpoints de frameworks para un conjunto completo.
- Añade condiciones como min-width 768px, orientation landscape o prefers-color-scheme dark; se unen con and.
- Elige la sintaxis y la unidad: min/max clásica o sintaxis de rango, en px, em o rem.
- Escribe un selector y declaraciones para envolverlos en la regla y observa el indicador de coincidencia mientras cambias el tamaño de la ventana.
- Copia el CSS o descárgalo como archivo .css.
Breakpoints de frameworks populares
Todos los valores son anchos mínimos en píxeles CSS. El primer rango de cada framework empieza en 0.
| Framework | Breakpoints (min-width) | Enfoque predeterminado |
|---|---|---|
| Bootstrap 5 | sm 576, md 768, lg 992, xl 1200, xxl 1400 | Mobile first; max-width usa .98 (767.98px) |
| Tailwind CSS | sm 640, md 768, lg 1024, xl 1280, 2xl 1536 | Mobile first (la v4 los escribe como 40rem, 48rem, 64rem, 80rem, 96rem) |
| Foundation 6 | medium 640, large 1024, xlarge 1200, xxlarge 1440 | Mobile first |
| Bulma | tablet 769, desktop 1024, widescreen 1216, fullhd 1408 | Mobile first |
| Material UI (MUI) | sm 600, md 900, lg 1200, xl 1536 | Mobile first (theme.breakpoints.up) |
| Material Design 3 | medium 600, expanded 840, large 1200, extra-large 1600 | Clases de tamaño de ventana |
Chuleta de características de medios
| Característica | Valores | Uso típico |
|---|---|---|
min-width / max-width | longitud | Diseños responsive según el ancho del viewport |
orientation | portrait, landscape | Teléfonos en horizontal de poca altura, pantallas de quiosco |
min-resolution | 2dppx (= 192dpi) | Servir imágenes más nítidas a pantallas de alta densidad |
hover / pointer | hover, none / fine, coarse, none | Efectos hover solo para usuarios de ratón; zonas táctiles más grandes para pantallas táctiles |
prefers-color-scheme | light, dark | Tema oscuro que sigue la configuración del sistema |
prefers-reduced-motion | reduce, no-preference | Desactivar animaciones para quien ha pedido menos movimiento |
prefers-contrast / forced-colors | more, less / active | Alto contraste y temas de contraste de Windows |
display-mode | standalone, fullscreen, minimal-ui, browser | Estilos para una aplicación web instalada (PWA) |
Sintaxis clásica frente a sintaxis de rango
@media (min-width: 768px) and (max-width: 1023.98px) y @media (768px <= width < 1024px) seleccionan las mismas pantallas. La forma de rango es más corta, admite el < estricto, por lo que ya no necesitas el truco del .98, y funciona en Chrome y Edge 104+, Firefox 63+ y Safari 16.4+. En unidades em, el generador divide los valores en píxeles entre 16, el tamaño de fuente predeterminado del navegador que se usa en las media queries.
Preguntas frecuentes
¿Qué es una media query CSS?
Una media query aplica un bloque de CSS solo cuando el dispositivo o el navegador cumple ciertas condiciones, como un ancho mínimo del viewport, una orientación horizontal o una preferencia de esquema de color oscuro. Se escribe como @media seguido de las condiciones y un bloque de reglas.
¿Debo usar min-width o max-width?
Con un enfoque mobile-first escribes los estilos base para pantallas pequeñas y añades consultas min-width para las más grandes; es lo que hacen Bootstrap y Tailwind. Desktop-first usa consultas max-width para sobrescribir los estilos de escritorio en pantallas más pequeñas. Ambos funcionan; mobile-first suele requerir menos sobrescritura de CSS.
¿Por qué Bootstrap usa 767.98px en lugar de 767px?
Los navegadores pueden informar de anchos fraccionarios en pantallas de alta densidad y al hacer zoom. Un max-width de 767px dejaría un hueco entre 767 y 768px en el que ninguna consulta coincide; 767.98px cierra ese hueco sin solaparse con min-width: 768px.
¿Qué es la sintaxis de rango de las media queries?
Media Queries Level 4 permite comparaciones como (width >= 768px) o (400px <= width <= 700px) en lugar de min-width y max-width. Es compatible con todos los navegadores principales actuales desde 2023; usa la sintaxis clásica si todavía necesitas dar soporte a navegadores antiguos.
¿Los breakpoints deben ir en px o en em?
Ambos funcionan en navegadores modernos. Las media queries en em son relativas al tamaño de fuente predeterminado del navegador (normalmente 16px), así que se escalan si el usuario aumenta su tamaño de texto predeterminado. rem se comporta igual que em dentro de las media queries.
¿Cómo detecto el modo oscuro con CSS?
Usa @media (prefers-color-scheme: dark) { … }. Coincide cuando el sistema operativo o el navegador tienen un tema oscuro. Añade también la propiedad color-scheme o la metaetiqueta para que los controles integrados y las barras de desplazamiento coincidan.
¿Qué hace @media (hover: hover)?
Coincide con dispositivos cuya entrada principal puede pasar el cursor por encima, como un ratón o un trackpad. Envolver los efectos hover en ella evita estados hover que se quedan pegados en pantallas táctiles. Usa (any-hover: hover) para comprobar cualquier entrada conectada en lugar de la principal.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.