After finishing this lesson, you will be able to do the following 3 things with confidence.

• ▸✅ Choose between mobile-first vs. desktop-first
• ▸✅ Understand the meaning of 768/1024/1440 breakpoints
• ▸✅ Choose between clamp() and vw/vh/rem/em units

Keep the learning objectives as a checklist, and close the lesson once you can answer all of them.

Core idea in one line

Responsive Design = A method of applying different layouts and styles depending on screen size. Mobile, tablet, and desktop — all from a single codebase.

Media Query basics

.container { width: 100%; padding: 16px; }

/* 768px and above (tablet) */
@media (min-width: 768px) {
    .container { padding: 24px; }
}

/* 1024px and above (desktop) */
@media (min-width: 1024px) {
    .container { max-width: 1200px; margin: 0 auto; padding: 32px; }
}

Applies different styles based on screen width. Small screens are the default, and additional styles are layered on top for larger screens.

Mobile First — The modern standard

/* 1. Mobile base (small screens) */
.card { display: block; padding: 12px; }

/* 2. Tablet additions */
@media (min-width: 768px) {
    .card { display: grid; grid-template-columns: 1fr 1fr; }
}

/* 3. Desktop additions */
@media (min-width: 1024px) {
    .card { grid-template-columns: 1fr 1fr 1fr; }
}

Why mobile first?

• ▸Mobile traffic accounts for 60%+
• ▸Small screens have more constraints → start there
• ▸Large screens have extra space — just add to it

Breakpoints — Where do we switch?

These are rough guidelines. In practice, the right answer is to set breakpoints where the content breaks.

Viewport meta tag — One required line

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Without this, mobile browsers assume desktop width and zoom out. Responsive design won't work. Required on every HTML page.

Mobile optimization checklist

1. Touch target ≥ 44 × 44 px — finger size (Apple guidelines)
2. Font size ≥ 16 px — prevents mobile zoom
3. Sufficient spacing — easy to tap with a finger
4. No horizontal scroll — overflow-x: hidden
5. Testing — Chrome DevTools mobile simulator

Container Query — 2023+

.card {
    container-type: inline-size;
}

@container (min-width: 400px) {
    .card-title { font-size: 24px; }
}

Media queries are based on screen size, while container queries are based on parent element size. This enables per-component responsive design. Supported in all modern browsers.

Quick recap

• ▸Mobile first + min-width to add styles for larger screens
• ▸Breakpoints: 768 and 1024 are the most common
• ▸<meta viewport> is required
• ▸Container queries enable component-level responsive design

Knowing the concepts from this lesson lets you give AI specific instructions. Not a vague 'fix this' — but a vocabulary-driven request — that's where token savings begin.

• ▸"Refactor this HTML/CSS by applying the Media Query — Mobile · Tablet · Desktop concept"
• ▸"Check accessibility and SEO related to Media Query — Mobile · Tablet · Desktop"
• ▸"Recreate the same result using Tailwind classes"

Why does this reduce tokens?

Without understanding the concept, you have to ask "What does that mean?" again after receiving the AI's answer. That follow-up question is what burns tokens. Learn the concept once, and the conversation wraps up in one round.