Responsive Design is the practice of building websites that automatically adapt to different screen sizes and devices.
A responsive website works well on:
Instead of creating separate websites, responsive design allows a single website to adjust its layout automatically.
Responsive Design ensures that:
Example:
Desktop
+---------------------------+
| Sidebar | Main Content |
+---------------------------+
Mobile
+-------------------+
| Main Content |
+-------------------+
| Sidebar |
+-------------------+
The same website uses a different layout depending on the device.
Most users browse websites on mobile devices.
Responsive websites provide:
Avoid fixed widths.
Instead of:
width: 1200px;
Use:
width: 100%;
max-width: 1200px;
Avoid fixed image sizes.
Bad:
img {
width: 800px;
}
Good:
img {
max-width: 100%;
height: auto;
}
Images automatically scale without overflowing their container.
Instead of fixed pixel values:
font-size: 32px;
Use scalable units such as:
font-size: 2rem;
or
font-size: clamp(1rem, 4vw, 3rem);
Media Queries apply different styles based on the screen size.
Syntax:
@media (condition) {
selector {
property: value;
}
}
Example:
@media (max-width: 768px) {
body {
background: lightblue;
}
}
The styles are applied only when the screen width is 768px or smaller.
Desktop example:
@media (min-width: 1024px) {
body {
background: white;
}
}
| Device | Breakpoint |
|---|---|
| Mobile | @media (max-width: 576px) |
| Tablet | @media (max-width: 768px) |
| Laptop | @media (max-width: 1024px) |
| Desktop | @media (min-width: 1200px) |
Desktop:
.nav {
display: flex;
}
Mobile:
@media (max-width: 768px) {
.nav {
flex-direction: column;
}
}
Desktop:
Home About Contact
Mobile:
Home
About
Contact
Desktop:
.grid {
display: grid;
grid-template-columns:
repeat(3, 1fr);
}
Mobile:
@media (max-width: 768px) {
.grid {
grid-template-columns:
1fr;
}
}
The layout changes from three columns to one column.
/* Mobile */
@media (max-width: 576px) {
}
/* Tablet */
@media (min-width: 577px)
and
(max-width: 768px) {
}
/* Desktop */
@media (min-width: 769px) {
}
Both conditions:
@media
(min-width: 768px)
and
(max-width: 1024px)
Either condition:
@media
(max-width: 576px),
(min-width: 1200px)
Container Queries style elements based on the size of their parent container instead of the viewport.
Enable container queries:
.card-wrapper {
container-type: inline-size;
}
Example:
@container
(max-width: 500px) {
.card {
flex-direction: column;
}
}
The layout changes only when the container becomes smaller than 500px.
| Media Queries | Container Queries |
|---|---|
| Viewport based | Container based |
| Layout level | Component level |
| Traditional approach | Modern approach |
Responsive typography keeps text readable on every screen size.
Instead of:
font-size: 60px;
Use scalable units:
font-size: 3rem;
Viewport units:
font-size: 5vw;
Or the recommended approach:
font-size:
clamp(
2rem,
5vw,
4rem
);
This sets:
h1 {
font-size:
clamp(2.5rem, 6vw, 5rem);
}
h2 {
font-size:
clamp(2rem, 4vw, 3rem);
}
h3 {
font-size:
clamp(1.5rem, 3vw, 2rem);
}
p {
font-size:
clamp(1rem, 2vw, 1.2rem);
}
.container {
width: 100%;
max-width: 1200px;
margin: auto;
}
.grid {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 768px) {
.grid {
grid-template-columns:
1fr;
}
}
h1 {
font-size:
clamp(
2rem,
5vw,
4rem
);
}
rem, %, vw, and vh.clamp() for responsive typography.img {
max-width: 100%;
height: auto;
}
Example:
.card {
width: 100%;
}
@media (min-width: 768px) {
.card {
width: 50%;
}
}
Responsive design allows websites to work on every device.
Modern responsive development commonly uses:
display: flex;
display: grid;
width: 100%;
font-size:
clamp(
1rem,
4vw,
3rem
);
@media (max-width: 768px) {
}
A modern responsive website is built using: