Responsive Web Design is a web design approach that provides the optimal layout
across a variety of screen sizes, such as mobile, tablet, and PC.
1. Viewport Meta Tag (Required)
<!-- Must be included in the HTML <head> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width: Makes the viewport width equal to the device screen widthinitial-scale=1.0: Initial zoom scale of 1x- Without this tag, @media queries do not work properly.
2. @media Queries
Apply different CSS depending on screen width (or other conditions).
/* Default: mobile styles */
.container {
padding: 16px;
font-size: 14px;
}
/* Tablet and up (768px and up) */
@media (min-width: 768px) {
.container {
padding: 24px;
font-size: 16px;
}
}
/* PC (1024px and up) */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}
3. Mobile-First vs Desktop-First
Mobile-First (Recommended)
Write the base styles for mobile, then add larger screens with min-width.
/* Default = mobile */
.cards { display: block; }
/* Tablet */
@media (min-width: 768px) {
.cards { display: flex; flex-wrap: wrap; }
}
/* PC */
@media (min-width: 1024px) {
.cards { grid-template-columns: repeat(3, 1fr); }
}
Desktop-First
Write the base styles for PC, then handle smaller screens with max-width.
/* Default = PC */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); }
/* Tablet and below */
@media (max-width: 1023px) {
.cards { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile and below */
@media (max-width: 767px) {
.cards { display: block; }
}
Mobile-First is recommended for performance and accessibility.
4. Common Breakpoints
| Name | Width | Target Device |
|---|---|---|
| Small | ~ 480px | Small smartphones |
| Mobile | 480px ~ 768px | Standard smartphones |
| Tablet | 768px ~ 1024px | Tablets, small laptops |
| Desktop | 1024px ~ | PCs, large laptops |
5. Responsive Units
| Unit | Description | Example |
|---|---|---|
px |
Fixed pixels | font-size: 16px |
% |
Ratio relative to the parent element | width: 50% |
em |
Based on the current element's font-size | padding: 1.5em |
rem |
Based on the root (html) font-size | font-size: 1rem |
vw |
% of the viewport width | width: 100vw |
vh |
% of the viewport height | height: 100vh |
/* Using rem: based on the html font-size */
html { font-size: 16px; } /* default value */
h1 { font-size: 2rem; } /* 16 × 2 = 32px */
p { font-size: 1rem; } /* 16 × 1 = 16px */
6. clamp() — Fluid Sizing
With clamp(minimum, preferred, maximum), the size changes smoothly without steps.
h1 {
/* Minimum 1.5rem, maximum 3rem, based on 5% of the viewport width */
font-size: clamp(1.5rem, 5vw, 3rem);
}
.container {
/* Minimum 300px, maximum 1200px */
width: clamp(300px, 90%, 1200px);
}
Example Files
Open responsive.html in the examples/ folder in your browser and
adjust the window width to see the layout change from 1 column to 2 columns to 3 columns.
Assignment
Read assignment.md and complete Applying Responsive Design to Your Portfolio.