Как измерить пиксели на экране в Windows

Короткий ответ: встроенной экранной линейки в Windows нет. DevTools измеряет внутри браузера, редакторы изображений — внутри своего холста; для всего остального возьмите бесплатную программу Экранная линейка: совместите нулевой край, перетащите маркер, прочитайте расстояние в пикселях, а окно-призрак положите поверх измеряемого интерфейса.

Зачем вообще измерять на экране

  • Пишете CSS: эта боковая панель — 320 px или 300 px? Измерьте, а не угадывайте, и задайте брейкпоинт правильно.
  • Доступность: зоны нажатия должны быть не меньше 44×44 px — линейка проверит оба размера за секунды.
  • Дизайн-приёмка: сравнить отступы в макете с живой страницей — ровно на том уровне точности, о котором спорят дизайнеры.
  • Презентации и печать: сколько места останется под картинку при разрешении проектора.
  • Любопытство с последствиями: «насколько широко это окно на самом деле?» — прежде чем писать под него скрипт.

Способ 1: инструменты браузера (только внутри браузера)

F12 → Inspect → наведите на элемент — увидите его box-модель. Идеально для DOM — бесполезно для видеоплеера, настольной программы, скриншота в просмотрщике или собственного окна.

Способ 2: Экранная линейка — измерит что угодно и где угодно

Скачать бесплатно — ScreenRuler-Setup.exe

  1. Совместите ноль. Поставьте левый край линейки (горизонтальный режим) или верхний край (вертикальный) туда, где начинается измерение.
  2. Перетащите линию-маркер ко второму концу; уточните стрелками — 1 px за нажатие, Shift для ×10. Кнопка сброса возвращает к нулю.
  3. Сделайте призраком: прозрачность до 40 % плюс «поверх всех окон», и полупрозрачная линейка ляжет прямо поверх нужного элемента. Читайте крупное значение — ≈ 482 px.

Замечания о точности

Одна единица линейки — один пиксель экрана, тот же px, на котором говорит CSS, при масштабе дисплея 100 %. При повышенном масштабе Windows всё на экране, включая измерения, — в масштабированных пикселях; нужны «неувеличенные» числа — сравнивайте при 100 %. Зум браузера меняет то, что вы измеряете: измеряйте при масштабе страницы 100 %.

Частые вопросы

Можно измерить расстояние по диагонали?

Нет — измеряйте описанный прямоугольник (ширину в горизонтальном режиме, высоту в вертикальном): системы вёрстки пользуются именно им.

Работает ли на любом мониторе и масштабе?

Окно переносится на любой монитор и измеряет его пиксели; масштабирование ведёт себя как описано выше.

Чем это лучше «скриншот + редактор»?

Скоростью и правдой: нет шага снятия скриншота и ошибок зума — вы измеряете живой экран ровно таким, каким он отрисован сейчас.