UUUP Tools

Herramientas de diseño

Probador de puntos de ruptura adaptables — Compatibilidad con frameworks en vivo

Consulta en tiempo real qué punto de ruptura del framework CSS coincide con el ancho actual de la ventana. Los ajustes predefinidos cubren Tailwind CSS, Bootstrap y Material UI, además de una lista personalizada para depuración adaptable.

Cambio rápido→Regla de píxeles
AdaptablePunto de rupturaDiseño
Cambio rápido:Regla de píxelesConversor de unidades CSS

Añadir esta herramienta a favoritos

No se ha seleccionado un modo de almacenamiento de favoritos.

Acciones rápidas

Volver a Herramientas de diseño Explorar todas las herramientas

Copia la URL de esta herramienta o abre la hoja de compartir del sistema en un dispositivo compatible.

Casos de uso

  • Confirma el punto de ruptura adaptable activo
  • Compara los puntos de ruptura predefinidos entre frameworks
  • Consulta los puntos de ruptura mientras construyes maquetaciones

Cómo usar

  1. Elige una configuración predefinida de framework CSS
  2. Redimensiona la ventana del navegador
  3. Lee el punto de ruptura actual y la lista

Entrada y salida de ejemplo

Ancho de ventana

768px

Tailwind

punto de ruptura md

FAQ

¿Qué frameworks se admiten?

Los ajustes predefinidos incluyen Tailwind CSS, Bootstrap 5, Material UI y una lista personalizada de puntos de ruptura.

Herramientas

Herramientas relacionadas

Continúa con otra herramienta traducida para una tarea cercana.

Regla de píxeles

Regla de píxeles — Tamaño de pantalla y marcas de medida

Disponible

Dibuja una regla de píxeles horizontal o vertical en la página. Ajusta la longitud y el espaciado de las marcas y consulta el tamaño de la ventana y la relación de píxeles del dispositivo para comparar medidas en píxeles CSS con maquetaciones y modelos de diseño.

Píxeles Regla Medir
Abrir herramienta

Conversor de unidades CSS

Conversor de unidades CSS — px, rem, em, vw

Disponible

Convierte entre px, rem, em, pt, vw, vh y %. Personaliza el tamaño de fuente raíz, el tamaño de fuente del contenedor padre y el tamaño de la ventana gráfica para trabajos adaptables y entregas de diseño a código.

CSS Unidades Conversión
Abrir herramienta