# Cheatsheet & Interview Q&A — Responsive and Mobile-First Web Design

Source: https://www.skillbyai.com/en/responsive-design/cheatsheet-interview

> Quick reference: key terms, media query syntax, breakpoints, and answers to common interview questions.

## Responsive CSS quick reference

Essential patterns and syntax for responsive design.

```css
/* Viewport meta tag (in HTML head) */
<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* Mobile-first base */
.container { width: 100%; padding: 16px; }

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

/* Flexible units */
body { font-size: 1rem; } /* Use rem */
.box { width: 100%; max-width: 1200px; } /* Use % */

/* Clamp for smooth scaling */
h1 { font-size: clamp(1.5rem, 5vw, 3rem); }

/* Images responsive */
img { max-width: 100%; height: auto; }

/* Grid auto-fit */
.grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
```

## Interview Q&A

**Q: What is responsive design?** A: Design that adapts to any screen size using flexible layouts, media queries, and flexible media.

**Q: Why mobile-first?** A: Simpler CSS, forces prioritization of content, and mobile is 50%+ of traffic.

**Q: What's the difference between max-width and min-width media queries?** A: min-width is mobile-first (build up), max-width is desktop-first (break down).

**Q: How do you make images responsive?** A: Use max-width: 100%, srcset for resolution, and <picture> for art direction.

**Q: What's the minimum touch target size?** A: 44x44px (Apple) or 48x48px (Android).

## Viewport units cheatsheet

Quick reference for viewport and container-relative sizing.

```css
/* Viewport units */
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1% of smaller dimension
1vmax = 1% of larger dimension

/* Usage */
h1 { font-size: clamp(1.5rem, 5vw, 3rem); }
.hero { height: 100vh; }
.sidebar { width: 25vw; }
```

## Interview tip: explain your approach

When asked about responsive design in an interview, explain the three pillars, your testing process, and real examples from your work.

## Final quiz 1 of 8

Final quiz

**Quiz:** Which meta tag makes a page render at the device width on mobile?

- [ ] charset
- [ ] robots
- [x] viewport
- [ ] description

*Answer:* viewport. The viewport meta tag stops mobile browsers from assuming a desktop width.

## Final quiz 2 of 8

Final quiz

**Quiz:** In mobile-first CSS, which query do you mainly use?

- [ ] max-width
- [ ] orientation only
- [ ] print
- [x] min-width

*Answer:* min-width. Base styles target mobile, and min-width layers on larger screens.

## Final quiz 3 of 8

Final quiz

**Quiz:** What does clamp(1rem, 2.5vw, 2rem) do?

- [x] Scales smoothly between a minimum and maximum
- [ ] Fixes the size at 2.5vw
- [ ] Hides the element
- [ ] Sets a media query

*Answer:* Scales smoothly between a minimum and maximum. The value follows the preferred size but never leaves the min and max.

## Final quiz 4 of 8

Final quiz

**Quiz:** Which Grid pattern creates responsive columns without media queries?

- [ ] grid-template-columns: 300px 300px
- [x] repeat(auto-fit, minmax(280px, 1fr))
- [ ] float: left
- [ ] display: inline

*Answer:* repeat(auto-fit, minmax(280px, 1fr)). auto-fit with minmax wraps columns as space allows.

## Final quiz 5 of 8

Final quiz

**Quiz:** What do container queries style components by?

- [ ] The viewport only
- [ ] The user agent
- [x] Their container's width
- [ ] The page title

*Answer:* Their container's width. The same component adapts to wherever it is placed.

## Final quiz 6 of 8

Final quiz

**Quiz:** Which attribute lets browsers pick an image size by screen?

- [ ] alt
- [ ] rel
- [ ] lang
- [x] srcset

*Answer:* srcset. srcset with sizes lets the browser download the right resolution.

## Final quiz 7 of 8

Final quiz

**Quiz:** What is a recommended minimum touch target size?

- [x] 44x44px
- [ ] 16x16px
- [ ] 10x10px
- [ ] 24x12px

*Answer:* 44x44px. Larger targets prevent mis-taps on touch screens.

## Final quiz 8 of 8

Final quiz

**Quiz:** Which Core Web Vital measures unexpected layout movement?

- [ ] LCP
- [x] CLS
- [ ] INP
- [ ] TTFB

*Answer:* CLS. CLS drops when images and ads reserve space with width, height or aspect-ratio.