Responsive Web Design

Responsive web design, or RWD, is an approach for making one document work across a range of screens, window sizes, zoom levels, orientations, and input methods. The browser receives the same semantic HTML, then CSS lets the presentation adapt to the space and capabilities available.

RWD is not a separate language or a list of device presets. It is a design system built from flexible foundations, intrinsic layout, conditional rules, responsive media, and verification. A page succeeds when its content and controls remain understandable and usable as the available space changes.

The rendering path

The browser parses HTML into a document structure and CSS into rules. It resolves the cascade, calculates each box's size and position, and paints the result inside the viewport. Responsive rules participate in that same process.

A media query asks about the viewport or another environment feature. When its condition is true, the declarations inside it join the cascade. A container query instead asks about a declared ancestor container, so a reusable component can respond to its local space rather than the entire window.

The viewport meta element matters on mobile browsers. A declaration such as <meta name="viewport" content="width=device-width, initial-scale=1"> asks the browser to use the device-width viewport instead of laying out a wider virtual canvas and shrinking it. Without that relationship, width-based rules can evaluate against an unexpected layout viewport.

Responsive Web Design

The rendering path

Relevant careers