Settings
800px length / 10px ticks / horizontal
Output
Horizontal pixel ruler + window and DPR info
Design Tools
Pixel Ruler — Screen Size and Tick Marks
Draw a horizontal or vertical pixel ruler on the page. Adjust length and tick spacing, and view window size plus device pixel ratio to check CSS pixel measurements against layouts and mockups.
PixelsRulerMeasure
Favorite this tool
No favorite storage mode has been selected.
Quick actions
Copy this tool URL or open the system share sheet on a supported device.
设计配色
Pixel Ruler
屏幕信息
窗口宽度-
窗口高度-
设备像素比-
屏幕分辨率-
Use cases
- Check pixel spacing against a design mockup
- Inspect current window size and DPR
- Switch horizontal/vertical rulers as a layout reference
How to use
- Set ruler length and tick spacing
- Choose orientation and theme
- Review the detected screen information
Example input and output
FAQ
Which pixels does the ruler use?
It draws in CSS pixels and also shows device pixel ratio so you can tell layout pixels from physical pixels.
What length range is supported?
Length is roughly 100–2000px; tick spacing options include 5, 10, 20, and 50px.
Tools
Related tools
Continue with another translated tool for a nearby task.
CSS Unit Converter
CSS Unit Converter — px, rem, em, vw
Convert among px, rem, em, pt, vw, vh, and %. Customize root font size, parent font size, and viewport size for responsive work and design-to-code handoff.
CSS Units Conversion
Aspect Ratio Calculator
Aspect Ratio and Proportional Size Calculator
Compute and lock an aspect ratio in your browser. Derive a ratio from width and height, or change one side while the other stays proportional. Includes common presets and a preview for cropping, video frames, and responsive layouts.
Ratio Size Design
CSS Clamp Generator
CSS Clamp Generator — Fluid Responsive Sizes
From min/max viewport widths and a target size range, compute a clamp() formula for fluid font sizes, spacing, and other lengths that scale with the viewport.
CSS clamp Responsive