Why Responsive Design Matters

Many phones show a web page in a space about 360 to 430 CSS pixels wide, while a laptop browser window is often 1,280 pixels wide or more. A page with a fixed width of 960 pixels fits the laptop. On the phone, it either runs off the right edge or shrinks until the text is too small to read. Building one page so that its layout adapts to the space it is given, instead of to one assumed screen, is called responsive design.

A CSS pixel is not the same as one dot on the screen. It is a reference unit, and a phone with a sharp screen uses two or three physical dots for each CSS pixel