Categoría: Desarrollo
Chuleta de puntos de ruptura responsivos
Compara los puntos de ruptura entre frameworks, o crea los tuyos
Compara los puntos de ruptura min-width predeterminados de Tailwind, Bootstrap, Bulma y Material Design, copia media queries listas para usar de cualquiera de ellos, o introduce tus propios nombres y anchos de punto de ruptura para generar unos personalizados.
| Nombre | Min-width |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
@media (min-width: 640px) {
/* sm */
}
@media (min-width: 768px) {
/* md */
}
@media (min-width: 1024px) {
/* lg */
}
@media (min-width: 1280px) {
/* xl */
}
@media (min-width: 1536px) {
/* 2xl */
}Escribe un nombre y un ancho en píxeles por línea, por ejemplo "md, 768".
| Nombre | Min-width |
|---|---|
| sm | 480px |
| md | 768px |
| lg | 1100px |
| xl | 1440px |
@media (min-width: 480px) {
/* sm */
}
@media (min-width: 768px) {
/* md */
}
@media (min-width: 1100px) {
/* lg */
}
@media (min-width: 1440px) {
/* xl */
}Todo lo de esta página se procesa en tu navegador. No se sube nada.
Para qué sirve
Cada framework CSS elige sus propios nombres y anchos en píxeles para los puntos de ruptura, lo que facilita confundir cuál se aplica dónde al cambiar entre proyectos. Esta herramienta muestra lado a lado los valores predeterminados de cuatro frameworks habituales y convierte cualquiera de ellos —o una lista personalizada que escribas— en bloques @media (min-width: …) listos para pegar.
Cómo se usa
- Elige un framework para ver sus puntos de ruptura predeterminados y sus media queries.
- Copia el CSS generado para los puntos de ruptura que necesites.
- O enumera tus propios nombres y anchos de punto de ruptura para crear consultas personalizadas.
Privacidad
Esta herramienta funciona íntegramente en tu navegador. Lo que introduces nunca se sube, se guarda ni se comparte: al cerrar la pestaña desaparece.
Preguntas frecuentes
- ¿Por qué min-width y no max-width?
- Un enfoque min-width, mobile-first, hace que los estilos base apunten a la pantalla más pequeña y cada punto de ruptura añada estilos para pantallas mayores, lo que evita ir sobrescribiendo reglas de un lado a otro como ocurre con el enfoque contrario.
- ¿Coinciden exactamente con los valores predeterminados del framework?
- Sí, son los puntos de ruptura predeterminados y documentados de cada framework. Si tu proyecto tiene una configuración personalizada de Tailwind o Bootstrap, usa el creador de puntos de ruptura personalizados con los valores propios de tu proyecto.
- ¿Cómo se da formato a la lista de puntos de ruptura personalizados?
- Un punto de ruptura por línea, como un nombre y un ancho en píxeles separados por una coma o un espacio, por ejemplo "md, 768".