Ajustes
800px de longitud / marcas de 10px / horizontal
Salida
Regla de píxeles horizontal + información de ventana y DPR
Herramientas de diseño
Regla de píxeles — Tamaño de pantalla y marcas de medida
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íxelesReglaMedir
Añadir esta herramienta a favoritos
No se ha seleccionado un modo de almacenamiento de favoritos.
Acciones rápidas
Copia la URL de esta herramienta o abre la hoja de compartir del sistema en un dispositivo compatible.
设计配色
Regla de píxeles
屏幕信息
窗口宽度-
窗口高度-
设备像素比-
屏幕分辨率-
Casos de uso
- Comprueba el espaciado en píxeles frente a un modelo de diseño
- Inspecciona el tamaño actual de la ventana y el DPR
- Cambia entre reglas horizontales y verticales como referencia de maquetación
Cómo usar
- Define la longitud de la regla y el espaciado de las marcas
- Elige orientación y tema
- Revisa la información de pantalla detectada
Entrada y salida de ejemplo
FAQ
¿Qué píxeles usa la regla?
Dibuja en píxeles CSS y también muestra la relación de píxeles del dispositivo para que puedas distinguir los píxeles de maquetación de los píxeles físicos.
¿Qué rango de longitud se admite?
La longitud es aproximadamente 100–2000px; las opciones de espaciado de marcas incluyen 5, 10, 20 y 50px.
Herramientas
Herramientas relacionadas
Continúa con otra herramienta traducida para una tarea cercana.
Conversor de unidades CSS
Conversor de unidades CSS — px, rem, em, vw
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
Calculadora de Relación de Aspecto
Calculadora de Relación de Aspecto y Tamaño Proporcional
Calcula y bloquea una relación de aspecto en tu navegador. Deriva una relación a partir del ancho y alto, o cambia un lado mientras el otro permanece proporcional. Incluye preajustes comunes y una previsualización para recortes, fotogramas de vídeo y diseños responsivos.
Relación Tamaño Diseño
Generador de clamp CSS
Generador de clamp CSS — Tamaños fluidos adaptables
A partir de anchos de viewport mínimo/máximo y un rango de tamaño objetivo, calcula una fórmula clamp() para tamaños de fuente fluidos, espaciado y otras longitudes que escalan con el viewport.
CSS clamp Adaptable