Responsive Web Design (RWD) is the practice of creating websites that automatically adapt to different screen sizes, devices, and orientations. Modern responsive design uses flexible layouts, responsive images, media queries, CSS Grid, and Flexbox to provide an excellent user experience across desktops, tablets, laptops, and mobile devices.
Responsive Web Design allows a website to automatically adjust its layout, typography, images, and components based on the user's screen size.
Instead of creating separate desktop and mobile websites, one responsive website serves all devices.
| Technique | Purpose | Example |
|---|---|---|
| Media Queries | Apply styles based on screen size | @media (min-width: 768px) |
| Flexbox | Responsive one-dimensional layouts | display: flex |
| Grid | Responsive two-dimensional layouts | display: grid |
| Responsive Units | Scale content dynamically | rem, %, vw |
| Responsive Images | Scale images correctly | max-width: 100% |
| Mobile First | Design for mobile before desktop | min-width |
Every responsive website should include a viewport meta tag.
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>This tells browsers to use the device width rather than rendering the page at a desktop width.
Mobile-first design means building the mobile layout first and then enhancing it for larger screens.
.card {
padding: 1rem;
}
@media (min-width: 768px) {
.card {
padding: 2rem;
}
}Media queries allow CSS rules to change based on screen size.
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}| Device | Breakpoint |
|---|---|
| Mobile | 0px - 767px |
| Tablet | 768px - 991px |
| Laptop | 992px - 1199px |
| Desktop | 1200px+ |
| Large Desktop | 1400px+ |
Responsive units adapt better than fixed pixel values.
| Unit | Description |
|---|---|
% | Percentage of parent size. |
rem | Relative to root font size. |
em | Relative to parent font size. |
vw | Viewport width. |
vh | Viewport height. |
fr | Fractional Grid unit. |
.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card {
flex: 1 1 250px;
}Flexbox automatically wraps cards when screen space becomes limited.
.grid {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}This is one of the most powerful responsive Grid patterns.
img {
max-width: 100%;
height: auto;
}Images should never overflow their containers.
h1 {
font-size: clamp(2rem, 5vw, 4rem);
}
The clamp() function creates fluid typography that scales naturally.
.layout {
display: grid;
gap: 1rem;
}
@media (min-width: 768px) {
.layout {
grid-template-columns: 250px 1fr;
}
}This layout becomes a two-column sidebar layout on larger screens.
Hybrid mobile applications built with technologies like Ionic, Capacitor, Cordova, React Native Web, or Progressive Web Apps rely heavily on responsive CSS.
.button {
min-height: 44px;
min-width: 44px;
}Responsive design is a major ranking factor because search engines prioritize mobile-friendly websites.