CSS Responsive
RWD Intro
Responsive Web Design (RWD) is the practice of building a single website that adapts its layout to any screen size — phone, tablet, laptop or large monitor. Instead of separate mobile and desktop sites, one flexible codebase reflows and rescales to fit each device.
What is Responsive Web Design?
The term was coined by Ethan Marcotte in 2010. The idea: rather than designing for a fixed width, build layouts that respond to the viewport. A responsive page might show three columns on a desktop, two on a tablet and one stacked column on a phone — all from the same HTML and CSS.
The Three Pillars of RWD
Classic responsive design rests on three technical ingredients working together.
| Pillar | What it provides |
|---|---|
| Fluid grids | Layouts sized in relative units (%, fr, rem) instead of fixed pixels |
| Flexible images/media | Images and video that scale within their containers (max-width: 100%) |
| Media queries | CSS that changes styling at specific screen-width breakpoints |
Fluid vs Fixed
A fixed layout uses hard pixel widths and looks broken when the screen is smaller than expected. A fluid layout uses relative units so it always fills the available space. The example below is fully fluid — resize the result pane and the boxes rescale smoothly.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; margin: 0; }
.fluid {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 12px;
background: #f1f5f9;
}
.col {
flex: 1 1 30%;
background: #6366f1;
color: #fff;
padding: 30px 12px;
border-radius: 8px;
text-align: center;
font-weight: 700;
}
.col:nth-child(2) { background: #ec4899; }
.col:nth-child(3) { background: #14b8a6; }
</style>
</head>
<body>
<div class="fluid">
<div class="col">Fluid 1</div>
<div class="col">Fluid 2</div>
<div class="col">Fluid 3</div>
</div>
</body>
</html>Design mobile-first: start with the smallest screen and layer on enhancements for larger ones with min-width media queries. It keeps CSS simpler and performance better.
Why RWD Matters
- Most web traffic today comes from mobile devices.
- One responsive site is cheaper to maintain than separate mobile and desktop versions.
- Google uses mobile-first indexing, so responsiveness affects search rankings.
- A layout that adapts gives every visitor a usable experience.
- Future-proofing: new device sizes are handled automatically.
Modern CSS makes RWD easier than ever. Flexbox, Grid, clamp(), and container queries often reduce or remove the need for many manual breakpoints.
Key Points
- RWD builds one site that adapts to every screen size.
- Its three pillars are fluid grids, flexible media and media queries.
- Use relative units (%, fr, rem) rather than fixed pixels for layout.
- Prefer a mobile-first approach with min-width breakpoints.
- Responsiveness improves usability, maintenance and SEO.