Regla de píxeles gratuita
Mide distancias en píxeles en tu pantalla.
Cómo usar
- Haz clic y arrastra sobre la regla para medir una distancia. La regla muestra incrementos en píxeles.
- Los puntos de inicio y final son desplazables, agárralos para ajustar la medición.
- Activa el modo vertical para medir distancias verticales en lugar de horizontales.
- Visualiza tu recuento de píxeles y el tamaño físico estimado bajo la regla.
Preguntas frecuentes
¿Cuál es la precisión del cálculo del tamaño físico?
El tamaño físico se basa en el ratio de píxeles de tu dispositivo y una DPI supuesta de 96. La DPI real de los monitores varía, así que se trata de una aproximación. Para mediciones precisas en documentos impresos, usa una regla física.
¿Puedo medir distancias verticales?
Sí. Activa el modo vertical para medir distancias verticales en píxeles en lugar de horizontales.
¿Qué significa el ratio de píxeles del dispositivo?
Las pantallas de alta densidad (como las pantallas Retina) tienen un ratio de píxeles superior a 1, es decir, varios píxeles físicos representan un píxel CSS. Esta herramienta mide en píxeles CSS.
Qué mide esta regla (y qué no puede medir)
Esta es una regla de medición de forma libre que vive dentro de la pestaña de tu navegador. Arrastra por el lienzo de arriba para obtener una lectura en píxeles CSS. Funciona sobre cualquier cosa pintada dentro del viewport del navegador (una captura de pantalla abierta en una pestaña, una exportación de Figma vista en línea, una página web en vivo en una segunda pestaña), pero no puede medir las ventanas del escritorio, la interfaz de apps nativas, la barra de tareas ni nada pintado por el compositor a nivel del sistema operativo fuera del navegador. Tampoco puede detectar automáticamente los límites de los elementos como pueden hacerlo Chrome DevTools o Page Ruler Redux. Ese es un tipo de herramienta diferente. El enfoque honesto importa: esta regla es la respuesta correcta cuando quieres una medición rápida y sin instalación dentro del navegador.
Los píxeles CSS no son puntos de hardware
El píxel que usan JavaScript y CSS es un píxel de referencia definido por el W3C: «el ángulo visual de un píxel en un dispositivo con una densidad de píxeles del dispositivo de 96 dpi y a una distancia del lector equivalente a un brazo extendido». Para una distancia nominal de un brazo extendido de unas 28 pulgadas, ese ángulo visual es de aproximadamente 0,0213°, o unos 0,26 mm en la superficie de la pantalla. El píxel CSS es una unidad de ángulo visual, no un punto de hardware, intencionadamente independiente del dispositivo, de modo que una fuente de 16 px aparece con aproximadamente el mismo tamaño físico en un teléfono, un portátil y un televisor.
Todas las demás longitudes CSS absolutas están ancladas a él: 1in = 2.54cm = 96px, 1mm ≈ 3.78px, 1pt ≈ 1.333px. Esa tabla de conversión fija es exactamente lo que hace que la lectura de «mm a 96 DPI» sea una estimación en lugar de una medición real, como se ve más abajo.
Tres palabras de píxel que los diseñadores confunden
| Término | Qué cuenta | Dónde vive |
|---|---|---|
| Píxel CSS | El píxel de referencia del W3C; la unidad que JS y CSS usan para el diseño | window.innerWidth, getBoundingClientRect(), toda longitud CSS |
| Píxel de dispositivo | El punto direccionable real del panel | screen.width × devicePixelRatio, la resolución nativa del monitor |
| Píxel de imagen | La resolución intrínseca de un archivo rasterizado | naturalWidth / naturalHeight en un <img> |
La relación en una frase: resolución física de la pantalla ≈ tamaño del viewport CSS × ratio de píxeles del dispositivo, y una imagen nítida necesita un ancho intrínseco ≥ ancho CSS renderizado × DPR. Un logotipo con un tamaño CSS de 100 px en un teléfono con DPR 3 necesita una imagen de origen de al menos 300 píxeles de ancho para verse nítido.
Ratio de píxeles del dispositivo
La lectura del DPR en el panel de información informa de window.devicePixelRatio: «la relación entre la resolución en píxeles físicos y la resolución en píxeles CSS para el dispositivo de visualización actual». Valores comunes:
- 1,0: pantallas clásicas de 96 DPI (monitores antiguos, máquinas Windows al 100 % de escala).
- 2,0: la mayoría de los MacBook Retina, muchos monitores 4K al 200 % de escala.
- 2,5-3,5: teléfonos modernos. Los modelos iPhone Pro informan de 3,0; los buques insignia de Android suelen situarse en 2,625 / 2,75 / 3,5.
Dos comportamientos que conviene conocer: el zoom de página (Ctrl/Cmd + y −) sí cambia el DPR, así que la lectura saltará a medida que amplías. El zoom con pellizco amplía el viewport renderizado sin cambiar el tamaño subyacente del píxel CSS, así que no lo cambia. Apple introdujo la pantalla Retina en el iPhone 4 en 2010 y, para evitar que las apps y páginas existentes se encogieran a una cuarta parte de su tamaño anterior cuando los píxeles del dispositivo se duplicaron en ambas dimensiones, iOS introdujo los «puntos» (su equivalente del píxel CSS). La web heredó el mismo modelo: un píxel CSS 2× se corresponde con cuatro píxeles del dispositivo.
Estándares de tamaño de los objetivos táctiles
Una de las cosas más útiles que hace una regla de píxeles es verificar que los botones, los enlaces y los iconos cumplen los mínimos de accesibilidad de los objetivos táctiles. Tres estándares suelen aparecer juntos:
| Fuente | Mínimo | Unidad | ~Físico (96 DPI) |
|---|---|---|---|
| WCAG 2.2 SC 2.5.8 AA | 24 × 24 | px CSS | ~6,4 × 6,4 mm |
| WCAG 2.5.5 AAA | 44 × 44 | px CSS | ~11,6 × 11,6 mm |
| Apple HIG | 44 × 44 | pt | ~11,6 × 11,6 mm |
| Material Design / Android | 48 × 48 | dp | ~9 mm (referencia de 160 dpi) |
WCAG 2.2 añadió el criterio AA de 24 × 24 en octubre de 2023. La prueba de conformidad del W3C lo formula así: «Debe ser conceptualmente posible dibujar un cuadrado sólido de 24 por 24 píxeles CSS… completamente dentro del objetivo». Hay cinco excepciones (espaciado, equivalente, en línea, control del agente de usuario, esencial), pero, en general, la interfaz del cuerpo debe superar ese listón. El criterio AAA más antiguo (2.5.5) requiere 44 × 44, lo que coincide con la HIG de Apple y aproximadamente con los 48 dp de Material.
La cuadrícula de diseño de 8 píxeles
La mayor parte del diseño de interfaces moderno se asienta sobre una unidad base de 8 píxeles (la «cuadrícula de 8 puntos» o la «cuadrícula de 8 dp», según la plataforma). Material Design 2 y 3 se construyen ambos sobre ella, con ajustes más pequeños de 4 dp para los iconos y los componentes densos. La elección del 8 no es accidental: se divide limpiamente en anchos de pantalla comunes (320, 360, 375, 1280, 1440), escala por proporciones enteras (8, 16, 24, 32, 40, 48) y se empareja de forma natural con el tipo de cuerpo por defecto de 16 px. Una subcuadrícula de 4 píxeles gestiona el alineamiento fino.
Uso práctico: cuando mides un hueco como 14 px o 17 px, probablemente has detectado un error de unidad CSS. El valor pretendido era casi con seguridad 16. La regla de píxeles es la forma más rápida de detectar el espaciado fuera de la cuadrícula.
Cuándo recurrirías a una regla de navegador
- Control de calidad de diseño en una página publicada. Compara el resultado en vivo con la especificación. ¿El hueco entre dos tarjetas es de 16 px o de 24 px?
- Verificación de objetivos táctiles. Coloca la regla sobre un botón para confirmar que cumple el mínimo AA de 24 px o el objetivo AAA de 44 px.
- Auditoría de espaciado en una maqueta pegada. Abre una exportación de Figma en una pestaña, coloca la regla sobre ella y comprueba el ritmo.
- Comprobaciones de los puntos de ruptura responsivos. La lectura del ancho del viewport hace las veces de indicador de punto de ruptura en vivo mientras redimensionas la ventana.
- Educación. Muestra a un desarrollador junior lo que informa
devicePixelRatioen su propia máquina y cómo cambia cuando pulsa Cmd/Ctrl + para ampliar. - Auditorías de accesibilidad. Verifica las áreas de pulsación de los botones de icono, la longitud de línea en píxeles CSS y los tamaños mínimos de texto.
Las DevTools del navegador y otras reglas
Todos los navegadores modernos traen herramientas de medición, pero están ocultas tras los paneles de desarrollador.
- Chrome DevTools: abre el menú de comandos (Cmd/Ctrl+Shift+P), escribe «rulers» y selecciona Mostrar reglas al pasar el cursor. Las reglas aparecen a lo largo de la parte superior e izquierda del viewport cuando pasas el cursor sobre un elemento. Está ligado a la selección de elementos en lugar del arrastre de forma libre.
- Firefox DevTools: Configuración → Botones disponibles de la caja de herramientas → activa Alternar reglas para la página. Aparece un botón para alternar la regla en la barra de herramientas de las DevTools; las reglas se superponen en los bordes de la página con las dimensiones del viewport en la esquina superior derecha.
- Figma / Sketch / Adobe XD: todos tienen superposiciones de regla dentro de su lienzo. Figma usa Mayús+R para alternarla. Están ligadas a archivos: miden dentro de su propio modelo de documento, no de una página web desplegada.
- Extensiones de navegador: Page Ruler Redux, MeasureIt, PixelZoomer, Dimensions. Todas requieren instalación y permisos; todas se mantienen confinadas al navegador. Útiles si necesitas la detección automática de elementos.
Una regla de pestaña del navegador como esta es la respuesta para los diseñadores, los revisores de control de calidad y la gente de contenidos que quieren un solo clic en lugar de los paneles de las DevTools o las instalaciones de extensiones.
Más preguntas
¿Cuál es la precisión de la lectura en milímetros?
Es una estimación. La conversión usa la relación fija del W3C de 1 in = 96 px CSS, precisa solo cuando tu monitor es realmente de 96 DPI, el zoom del navegador está al 100 % y el escalado del sistema operativo está al 100 %. Los monitores reales varían mucho: un panel 1080p de 24 pulgadas ronda los 92 ppi, uno 1440p de 27 pulgadas unos 109 ppi, uno 4K de 27 pulgadas unos 163 ppi. Trata el número en mm como una estimación de orden de magnitud, nunca como una medición de calidad de imprenta. Para tamaños físicos reales, sostén una regla física contra la pantalla.
¿Por qué cambia el ratio de píxeles del dispositivo cuando hago zoom?
El zoom de página (Cmd/Ctrl + o −) cambia literalmente el tamaño de un píxel CSS en relación con el píxel del dispositivo, así que la relación entre ellos se desplaza. El zoom con pellizco en los dispositivos táctiles funciona de otra manera. Amplía el viewport renderizado sin cambiar el tamaño subyacente del píxel CSS, así que no mueve el DPR.
¿Por qué 1366 × 768 no es exactamente 16:9?
Porque no lo es, del todo. 1366 ÷ 768 = 1.7786; el verdadero 16:9 es 1.7778. La proporción simplificada es en realidad 683:384. Muchos paneles de portátil baratos usan esta resolución ligeramente fuera de especificación, lo cual es una de las razones por las que el vídeo 1080p a veces se reduce de escala de forma imperfecta en ellos.
¿Puedo medir fuera del navegador?
No. Una página web solo puede ver y pintar dentro de su propia pestaña del navegador. Para medir las ventanas del escritorio, la interfaz de apps nativas o cualquier otra cosa fuera del navegador, necesitarías una utilidad a nivel del sistema operativo: el «Mostrar inspector» de Vista Previa de macOS, la Herramienta Recortes de Windows con la superposición de dimensiones, o una regla de pantalla de terceros.
¿Se envía algo a un servidor?
No. La regla se renderiza con la API canvas de HTML5; las dimensiones del viewport y el DPR provienen de JavaScript localmente; la lectura de la medición se calcula en tu navegador. La página funciona sin conexión una vez cargada.