Styling & CSS · Layout
Responsive Design
Also called: RWD, Responsive layout, Mobile-friendly design, Adaptive layout
The same page adjusts its layout automatically to the screen width, so it can be viewed and used properly on phones, tablets, and computers.
In detail
Responsive design is a goal: one codebase that fits screens of different sizes, instead of building a separate site for phones. For example, three columns of cards on desktop become two on a tablet and one on a phone, a horizontal nav menu tucks into a hamburger button on phones, and a sidebar becomes a drawer on small screens.
There are three kinds of techniques: flexible layout (Flex, Grid, percentage widths, so elements stretch and shrink on their own), Media Query rules (switch styles at a certain width), and relative units (rem, vw). The value for "at what width to switch" is called a Breakpoint. How they relate: responsive design is the goal, media queries are the tool, and breakpoints are the specific values used in that tool.
A common approach is "mobile first": write the phone styles first, then add styles step by step for wider screens.
Developer infoTerm ID, DOM cues, match priority
- Term ID
style-responsive- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v1 · updated Sep 29, 2026