Responsive design system a breakpoint strategie

Vytvoř responsive design systém pro [PRODUKT/WEB]. Platformy: [MOBILE/TABLET/DESKTOP/TV]. Framework: [TAILWIND/BOOTSTRAP/CUSTOM CSS]. Struktura: 1) **Breakpoint Strategy** - breakpoint definitions (mobile 320-767px, tablet 768-1023px, desktop 1024-1439px, wide 1440px+), approach (mobile-first vs desktop-first), container max-widths, gutter/margin system, safe zones for mobile (top/bottom navigation), 2) **Fluid Typography** - type scale (base 16px), fluid font sizes using clamp() (min, preferred, max), line heights responsive (1.5 mobile, 1.6 desktop), modular scale ratio (1.25 minor third, 1.333 perfect fourth), heading sizes responsive (H1: 32px mobile → 64px desktop), 3) **Spacing System** - base unit (4px or 8px grid), responsive spacing (8px mobile → 16px desktop for sections), component spacing (card padding 16px mobile → 24px desktop), vertical rhythm (consistent line-height * font-size), 4) **Grid System** - 12-column grid (flexible), responsive columns (1 col mobile, 2 cols tablet, 3-4 cols desktop), gap/gutter sizes (16px mobile, 24px tablet, 32px desktop), CSS Grid vs Flexbox decisions, 5) **Component Adaptations** - navigation (hamburger mobile → full nav desktop), cards (stacked mobile → grid desktop), forms (full-width mobile → multi-column desktop), modals (full-screen mobile → centered desktop), tables (horizontal scroll mobile → full table desktop), 6) **Images & Media** - responsive images (srcset, sizes attribute), art direction (different crops per breakpoint), lazy loading strategy, aspect ratios (16:9 desktop, 4:3 mobile), image optimization (WebP, AVIF), 7) **Touch vs Mouse** - touch targets (min 44x44px mobile), hover states (desktop only), focus indicators (keyboard navigation), gesture support (swipe, pinch), 8) **Performance** - critical CSS (above-the-fold), lazy load below-the-fold, responsive image loading, reduce motion for mobile, font loading strategy, 9) **Testing Matrix** - devices to test (iPhone SE, iPhone 14 Pro, iPad, MacBook), browsers (Safari, Chrome, Firefox), orientations (portrait, landscape), zoom levels (100%, 200%), 10) **CSS Implementation** - media queries organized, CSS custom properties for breakpoints, Tailwind responsive utilities, container queries (new), print styles. Zahrň 15+ component examples s responsive behavior.