Responsive Design Explained Line by Line - vdsology
Chapter 6 — Responsive Design Explained Line by Line
1. The Viewport Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width → “Set the page width to match the actual screen width of this device.”
initial-scale=1.0 → “Don’t zoom in or out when the page first loads. Show it at 1:1 scale.”
2. Media Queries — Explained
@media (max-width: 600px) {
.card { padding: 12px; }
}
@media — a special CSS rule that wraps other rules. Only applies what’s inside if the condition is true.
(max-width: 600px) — means “when the screen is 600px wide OR LESS.” Same as:
if (screenWidth <= 600px) { apply the CSS inside }
Combining conditions:
@media (min-width: 600px) and (max-width: 900px) {
/* only applies between 600px and 900px */
}
3. Breakpoints — Why These Numbers?
| Number | Why |
|---|---|
480px |
Large phones (iPhone Plus sizes) |
768px |
Tablets (iPad portrait) |
1024px |
Small laptops / iPad landscape |
1280px |
Standard desktop monitors |
These are conventions, not rules. Use any numbers that make sense for your design.
4. max-width vs min-width
| Condition | Meaning |
|---|---|
max-width: 600px |
600px and below — small screens |
min-width: 600px |
600px and above — larger screens |
Desktop first uses max-width — starts wide, you override for small.
Mobile first uses min-width — starts simple, you add complexity upward. ✅ Recommended.
5. clamp() — Explained
h1 { font-size: clamp(28px, 5vw, 56px); }
clamp(min, preferred, max):
- Never smaller than
28px - Tries to be
5vw(5% of screen width — scales with screen) - Never larger than
56px
| Screen | 5vw |
Actual result |
|---|---|---|
| Phone 375px | 18.75px → below min | 28px (minimum) |
| Tablet 768px | 38.4px | 38.4px |
| Desktop 1200px | 60px → above max | 56px (maximum) |
6. Units — Explained One by One
px — Fixed. Always exactly that many pixels. Good for borders, bad for layout widths.
% — Percentage of parent element. If parent is 1000px and you set width: 80%, element is 800px. Responds to its parent.
vw — 1vw = 1% of browser window width. 100vw = full window. Unlike %, always relative to the window, not the parent.
vh — Same but for height. 100vh = full visible screen height. Very common for hero sections.
rem — 1rem = the font size of the <html> element (usually 16px). So 1.5rem = 24px. Use for fonts and spacing because users can change their browser’s base font size for accessibility. rem respects that. px ignores it.
7. Container Pattern — Explained
.container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 0 1rem;
}
max-width: 1200px — never gets wider than 1200px. On huge monitors, text doesn’t stretch across the whole screen.
width: 100% — below 1200px, fills the full available width.
margin: 0 auto — 0 top/bottom, auto left/right. When both sides are auto and element has a max width, the browser splits remaining space equally → centered.
padding: 0 1rem — prevents content from touching screen edges on phones.
8. Responsive Grid — Explained
/* MOBILE — single column */
.page {
display: grid;
grid-template-areas: "header" "content" "sidebar" "footer";
grid-template-columns: 1fr;
}
grid-template-columns: 1fr = one column taking all space. Each area stacks vertically.
/* TABLET — sidebar appears */
@media (min-width: 768px) {
.page {
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-columns: 220px 1fr;
}
}
Now two columns. Header spans both ("header header"). Sidebar and content side by side.
/* DESKTOP — sidebar gets wider */
@media (min-width: 1024px) {
.page { grid-template-columns: 280px 1fr; }
}
Same layout, sidebar just wider.
9. Responsive Images — Explained
img {
max-width: 100%;
height: auto;
display: block;
}
max-width: 100% — never wider than container. Shrinks automatically but doesn’t stretch past natural size.
height: auto — maintains original aspect ratio as width changes. Without it: stretched or squished.
display: block — removes a small default gap below images (inline elements sit on a text baseline).
srcset:
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
alt="A landscape"
>
400w means “this file is 400 pixels wide.” The browser picks the best size automatically. Phone loads small file, desktop loads large one.
10. The CSS Reset — Explained
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
* — every single element on the page.
box-sizing: border-box — makes width include padding and border. Without it, adding padding makes elements bigger than specified, breaking layouts.
margin: 0 and padding: 0 — browsers have their own default styles. <h1> has default margin, <body> has default padding. These differ across browsers. Setting all to 0 gives a clean slate.
Tags: #CSS #css #vdsology #webdevelopment #vdsologyCSS #CSS3 #CSSreference #CSSreference2026
Write a comment