Cómo medir píxeles en pantalla en Windows
Respuesta corta: Windows no tiene regla en pantalla. DevTools mide dentro del navegador y los editores de imágenes dentro de su lienzo; para todo lo demás, usa una herramienta gratuita como Regla de pantalla: alinea el borde cero, arrastra el marcador, lee la distancia en píxeles y pon la ventana en fantasma sobre la interfaz que mides.
Por qué querrías medir en pantalla
- Escribir CSS: ¿esa barra lateral mide 320 px o 300 px? Mide en vez de adivinar y define bien el breakpoint.
- Accesibilidad: los objetivos táctiles deberían medir al menos 44×44 px — la regla comprueba ambas dimensiones en segundos.
- Revisión de diseño: comparar el espaciado de una maqueta con la página en vivo, al nivel de píxel del que discuten los diseñadores.
- Presentaciones e impresión: comprobar qué área puede ocupar una imagen a la resolución del proyector.
- Curiosidad con consecuencias: «¿qué ancho tiene de verdad esta ventana?» antes de programar algo para ella.
Método 1: las herramientas del navegador (solo dentro del navegador)
F12 → Inspeccionar → pasa el cursor por cualquier elemento para ver su modelo de caja. Perfecto para el DOM — inútil para un reproductor de vídeo, una app de escritorio, una captura en un visor o tu propia ventana.
Método 2: Regla de pantalla — mide cualquier cosa, en cualquier lugar
Descargar gratis — ScreenRuler-Setup.exe
- Alinea el cero. Coloca el borde izquierdo de la regla (modo horizontal) o el borde superior (vertical) donde empieza la medición.
- Arrastra la línea de marcador hasta el otro extremo; afina con las flechas — 1 px por pulsación, Shift para ×10. El botón «Restablecer marcador» lo devuelve a cero.
- Conviértela en fantasma: la opacidad al 40 % más «Siempre visible» ponen la regla translúcida justo sobre el elemento en cuestión. Lee el valor grande —
≈ 482 px.
Notas de precisión
Una unidad de la regla es un píxel de pantalla — el mismo px que habla CSS — con la escala al 100 %. Con una escala de Windows mayor, todo en pantalla, incluidas tus mediciones, va en píxeles escalados; si necesitas cifras sin escalar, compara al 100 %. El zoom del navegador cambia lo que mides: mide al 100 % de zoom.
Preguntas frecuentes
¿Puedo medir una distancia en diagonal?
No — mide el rectángulo que la encierra (ancho en modo horizontal, alto en vertical): es lo que usan los sistemas de maquetación de todos modos.
¿Funciona en cualquier monitor o escala?
La ventana se mueve a cualquier monitor y mide los píxeles de esa pantalla; la escala se comporta como se describe arriba.
¿En qué se diferencia de «captura + editor»?
En velocidad y verdad: sin paso de captura ni errores de zoom — mides la pantalla viva tal como se renderiza ahora mismo.