Como medir pixels na tela do Windows

Resposta curta: o Windows não tem régua na tela. O DevTools mede dentro do navegador, os editores de imagens dentro do próprio canvas — para todo o resto, use uma ferramenta gratuita como Régua de tela: alinhe a borda zero, arraste o marcador, leia a distância em pixels e coloque a janela fantasma sobre a interface que está medindo.

Por que medir na tela

Escrever CSS: essa barra lateral tem 320 px ou 300 px? Meça em vez de adivinhar e defina o breakpoint corretamente.
Acessibilidade: alvos de toque devem ter pelo menos 44×44 px — a régua confere as duas dimensões em segundos.
Revisão de design: comparar o espaçamento de um mockup com a página ao vivo, no nível de pixel que os designers discutem.
Apresentações e impressão: verificar que área uma imagem pode ocupar na resolução do projetor.
Curiosidade com consequências: «qual é a largura real dessa janela?» antes de programar algo para ela.

Método 1: as ferramentas do navegador (somente dentro do navegador)

F12 → Inspecionar → passe o mouse sobre qualquer elemento para ver o box model. Perfeito para o DOM — inútil para um player de vídeo, um app de desktop, uma captura num visualizador ou a sua própria janela.

Método 2: Régua de tela — mede qualquer coisa, em qualquer lugar

Baixar grátis — ScreenRuler-Setup.exe

Alinhe o zero. Coloque a borda esquerda da régua (modo horizontal) ou a borda superior (vertical) onde a medição começa.
Arraste a linha de marcador até a outra ponta; refine com as setas — 1 px por toque, Shift para ×10. O botão «Redefinir marcador» devolve ao zero.
Transforme em fantasma: opacidade em 40 % mais «Manter no topo» põem a régua translúcida bem sobre o elemento em questão. Leia o valor grande — ≈ 482 px.

Notas de precisão

Uma unidade da régua é um pixel da tela — o mesmo px que o CSS fala — com a escala em 100 %. Com uma escala do Windows maior, tudo na tela, medições incluídas, fica em pixels escalados; se precisar de números sem escala, compare em 100 %. O zoom do navegador muda o que você mede: meça com 100 % de zoom.

Perguntas frequentes

Posso medir uma distância na diagonal?

Não — meça o retângulo que a envolve (largura no modo horizontal, altura no vertical): é o que os sistemas de layout usam de qualquer forma.

Funciona em qualquer monitor ou escala?

A janela se move para qualquer monitor e mede os pixels daquela tela; a escala se comporta como descrito acima.

Qual a diferença da rota «captura + editor»?

Velocidade e verdade: sem etapa de captura, sem erros de zoom — você mede a tela viva exatamente como ela renderiza agora.