Logical vs Physical Pixels
CSS and design tools work in logical pixels (CSS pixels), an abstract unit that stays consistent regardless of screen density. Physical pixels are the actual hardware dots on a screen. On a 2x Retina display, each CSS pixel maps to a 2×2 block of physical pixels, producing a crisper image without you needing to change your design dimensions.
Designing Mockups at the Right Scale
Work at 1x (logical pixels) in Figma, Sketch, or other design tools. The most common mobile design canvas is 390px wide (matching iPhone 15) or 375px (matching older iPhones). Export assets at 1x, 2x, and 3x to support all screen densities, and use the HTML srcset attribute to serve the right resolution automatically.
Responsive Design Breakpoints Reference
Common CSS breakpoints: mobile 375–430px, tablet 768–1024px, desktop 1280px and above. These map closely to actual device logical widths in this table, so use the data here to validate your breakpoint choices against real device populations.
Frequently Asked Questions
To support 3x devices (iPhone 15 Pro, Galaxy S24 Ultra), export images at 3× their displayed CSS size. Use srcset to serve 1x, 2x, and 3x versions — browsers load the appropriate resolution automatically based on the screen DPR.
PPI (Pixels Per Inch) measures screen pixel density. DPI (Dots Per Inch) is a print term for ink dot density. For screens, PPI is the correct term. In practice they are often used interchangeably, but when discussing digital displays, PPI is more precise.