Dev UtilitiesLesson 139Free preview
Pixel Ruler
This lesson is part of Web Developer Tools · All levels
Summary
Pixel ruler measures the distance and size of the elements on the screen in units of pixels. This tool helps check the margins, padding, width of the image, or distance between components. Remember that CSS pixels are logical units and can be different from physical pixels on a screen with high device pixel ratio. For accurate measurements, use the size of the viewport and the relevant zoom rate.
Key points
- CSS pixels are logical units, not always physical pixels.
- DevTools can display the size and distance of the elements
- GetBoundingClientRect gives real size of the layout results
- Browser zoom affects visual measurement
- Measure to the viewport size that matches the user's target
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.