Screen Resolution

Screen resolution is the pixel dimensions of a user's display — 1920 by 1080, say — which sets the overall frame of available display space.

Screen resolution is the raw input to responsive decisions: it says what sizes users arrive with so it is clear which breakpoints a design should optimize for. But a fundamental confusion happens here: screen resolution is not the same as the real space a web page renders into. A web page renders in the viewport, which is usually smaller than the whole display, and on modern phones the device pixel ratio makes the hardware resolution several times the logical pixels; so a phone with a high nominal resolution may give a small logical space for layout. Layout decisions should therefore be made on the viewport, not the raw hardware resolution. A second trap is focusing on the largest resolutions while layout problems almost always occur in the smallest common sizes.