Screen Resolution

DPR is the number of physical pixels per CSS pixel. A DPR of 2 indicates a Retina display, meaning images should be 2x larger for crisp display.

Screen resolution is the total physical pixels of your monitor, while viewport is the area where content is displayed in the browser, excluding toolbars and scrollbars.

Pinning breakpoints to specific device names guarantees they break the moment a new device ships. Cut where the layout itself starts to look wrong instead. In practice 480, 768, 1024 and 1280 px are common starting points, but they are memorable numbers rather than rules. Drag the browser window slowly narrower and watch for the width where lines of text grow too long or a card squashes; putting the breakpoint right there is far more durable.

A CSS pixel is a unit of apparent size, not a physical dot. On a 4K display set to 200% scaling, 3840 physical dots are presented as 1920 CSS pixels, which is what makes text and icons look denser and sharper. The device pixel ratio is then 2, so to keep images crisp you need to supply a file at twice the displayed size through srcset.