Breakpoints

"Using such a resolution in the web browser would render a tiny illegible desktop site. To avoid that, CSS pixels add a layer of abstraction. Initially the amount of actual pixels compared to CSS pixels was simply a 2x or 3x conversion, but these days fractional scaling is also common."

"In 2007, the first iPhone launched with a screen width of 320px. Back then CSS pixels would be the same as device pixels, so we had a 1x conversion. Several months ago, I tasked myself to find out if there are new phones for sale where you end up with a screen width of 320px in the mobile browser."

A hospital stay prompted exploration of Android's accessibility features, specifically font size adjustments, which exposed web design edge cases. Modern smartphones use CSS pixels as an abstraction layer over device pixels to render readable content. The conversion ratio between device pixels and CSS pixels has evolved from simple 2x or 3x multipliers to fractional scaling. While 320px was the standard mobile screen width in 2007, current minimum screen width is 360px. However, this investigation revealed that understanding these pixel conversions and their implications for responsive design remains crucial for accommodating diverse user needs and device configurations.

Read at Cssence