Responsive & Adaptive Design

Lesson 11

Responsive design with AI assistance is fast — but only if you know what to ask. The most common mistake is prompting for responsive behavior after the desktop layout is done. Instead, ask for mobile-first from the start.

The mobile-first refactoring prompt

When you have an existing component that was built desktop-first, this prompt pattern reliably restructures it:

이 컴포넌트를 mobile-first로 리팩토링해줘.
기존 데스크탑 스타일은 min-width 768px 안에 넣어줘.
기본(모바일) 스타일이 먼저 오도록.

The result: base styles work on mobile, desktop overrides only add to that foundation. This eliminates the cascade problems that break layouts on small screens.

Fluid typography with clamp()

Fixed breakpoints for font sizes are a thing of the past. Describe the range you want:

헤딩 폰트 크기: 모바일에서 1.5rem, 데스크탑에서 3rem.
그 사이는 부드럽게 스케일링.
clamp() 사용해줘.

AI calculates clamp(1.5rem, 4vw + 0.5rem, 3rem) — a formula that scales smoothly between viewport widths with no breakpoints needed. The middle value 4vw + 0.5rem is the fluid part, and AI handles the math.

Container queries vs media queries

Media queries respond to the viewport width. Container queries respond to the parent element’s width. This distinction matters for reusable components:

이 카드 컴포넌트가 viewport 크기가 아니라
부모 컨테이너 크기에 반응하게 만들어줘.
컨테이너 400px 미만: 세로 레이아웃, 이미지 숨김.
컨테이너 400px 이상: 가로 레이아웃, 왼쪽 이미지.
@container 쿼리 사용.

The key question to ask yourself: “Does this component care about the page width, or about the space it’s placed in?” If it’s the latter, container queries are the right tool.

Responsive grid with auto-fill

For card grids, this pattern is more flexible than explicit breakpoints:

카드 그리드:
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))
이렇게 하면 브라우저가 알아서 열 수를 조절해.
gap 20px.

auto-fill with minmax is self-correcting — it automatically moves from 1 column on mobile to 2, 3, or more on wider screens without a single @media query.

Key prompt pattern

When asking for responsive behavior, always specify three things: the breakpoints (or “use fluid scaling”), the layout change at each breakpoint (columns, stacking, hiding), and whether you want mobile-first or desktop-first ordering in the CSS.

The demo shows a live viewport indicator, fluid typography you can observe by resizing, a responsive card grid using auto-fill, and a container query component that reacts to its own container width.