All you need to know about pixels
This title could be clearer and more informative.Try out Clickbait Shieldfor free (5 uses left this month).
Physical pixels are hardware dots on screens, while logical pixels are OS abstractions for consistent display. CSS pixels are web development units independent of device density. The device pixel ratio (DPR) relates physical to CSS pixels. For accessibility, use `rem` units for typography instead of `px` to respect user font
Table of contents
What is a pixelPhysical pixel (also called device pixel or hardware pixel)Logical pixel (also called device-independent pixel DIP )Logical resolutionCSS pixelDevice pixel ratio ( DPR )Relationship between CSS pixels and logical pixelsPixels per inch (PPI)ViewportLayout viewportVisual viewportIdeal viewportZoomingGet Michael Zheng ’s stories in your inboxCSS units and accessibilityPixel ( px )Em ( em )Rem ( rem )Accessibility: font scaling vs. zoomingBest practicesWhen to use each unitTesting different pixel densitiesCommon pitfallsConclusionNoticeSort: