Setting the file. One moment.
Skill 05 · Bencium Impact Designer
Subchapter 5.3
RESPONSIVE-DESIGN.mdMarkdown2 KBView on GitHub
Mobile-first approach: start with mobile, progressively enhance for larger screens.
| Range | Pixels | Devices | Strategy |
|---|---|---|---|
| XS | 0-479px | Small phones | Single column, stacked nav, 44px touch targets |
| SM | 480-767px | Large phones | Single column, bottom nav, simplified UI |
| MD | 768-1023px | Tablets | 2 columns possible, sidebar nav |
| LG | 1024-1439px | Laptops | Multi-column, full nav, desktop UI |
| XL | 1440px+ | Desktop | Max-width containers, multi-panel layouts |
// Mobile-first: base styles, then scale up
<div className="
w-full // mobile: full width
sm:w-1/2 // 480px+: half
md:w-1/3 // 768px+: third
lg:w-1/4 // 1024px+: quarter
">
// Responsive grid
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
// Responsive typography
<h1 className="text-3xl md:text-4xl lg:text-5xl">
// Show/hide by breakpoint
<div className="block md:hidden">Mobile only</div>
<div className="hidden md:block">Desktop only</div>h1 { font-size: clamp(2rem, 5vw, 4rem); }
p { font-size: clamp(1rem, 2.5vw, 1.25rem); }touch-manipulation to prevent 300ms tap delay<button className="min-w-[44px] min-h-[44px] touch-manipulation">| Desktop | Mobile |
|---|---|
| Full nav bar | Hamburger menu |
| Side-by-side fields | Stacked fields |
| Multi-column grid | Single column |
| Inline buttons | Fixed bottom bar |
| Data table | Collapsed cards |
| Visible sidebar | Hidden/collapsible |
// Responsive images
<img
srcSet="image-400w.jpg 400w, image-800w.jpg 800w, image-1200w.jpg 1200w"
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
loading="lazy"
/>
// Next.js
<Image src="/hero.jpg" width={1200} height={600} priority className="w-full h-auto" />Test at these widths: