Quick answer
Responsive design is the practice of designing websites that adapt to any screen size, from a 360px phone to a 4K monitor, with the same content and a usable layout.
What it is
Responsive design uses fluid grids, flexible images and CSS media queries to adapt a layout to the viewport. The site looks correct on a small phone, a tablet, a laptop and a 4K monitor with the same HTML and content.
Why it matters
Most web traffic is mobile. A non-responsive site loses visitors, fails SEO and breaks accessibility. Responsive is the baseline.
How to use it
- Design mobile-first and add progressive enhancements for larger screens.
- Use relative units (rem, %, vw) instead of fixed pixels.
- Test on real devices, not just emulators.
- Use CSS grid and flexbox for layout.
Examples
- A marketing site uses a 4-column grid on phones, 6 on tablets and 12 on desktops.
- A blog post reflows its typography for narrow screens without breaking line length.