Responsive Design

Responsive Design

Mobile-First Breakpoints

/* Base: Mobile (0-639px) - no media query needed */

/* sm: Large phones / Small tablets */
@media (min-width: 640px) { }

/* md: Tablets */
@media (min-width: 768px) { }

/* lg: Small laptops */
@media (min-width: 1024px) { }

/* xl: Desktops */
@media (min-width: 1280px) { }

/* 2xl: Large screens */
@media (min-width: 1536px) { }

CSS Token Integration

:root {
  /* Breakpoint tokens */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  
  /* Container max-widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  
  /* Fluid spacing */
  --space-responsive: clamp(1rem, 4vw, 2rem);
  --space-section: clamp(2rem, 8vw, 6rem);
}

Fluid Typography

:root {
  /* Fluid type scale */
  --text-fluid-sm: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  --text-fluid-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-fluid-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-fluid-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --text-fluid-2xl: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  --text-fluid-hero: clamp(2.5rem, 2rem + 4vw, 6rem);
}

h1 { font-size: var(--text-fluid-2xl); }
h2 { font-size: var(--text-fluid-xl); }
p { font-size: var(--text-fluid-base); }

Layout Patterns

Fluid Grid

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-4);
}

Responsive Stack

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .stack--row-md {
    flex-direction: row;
  }
}

Container Query Ready

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

@container card (min-width: 400px) {
  .card {
    flex-direction: row;
  }
}

React Pattern

// useMediaQuery.ts
export const useMediaQuery = (query: string): boolean => {
  const [matches, setMatches] = useState(
    () => window.matchMedia(query).matches
  );

  useEffect(() => {
    const mq = window.matchMedia(query);
    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
    mq.addEventListener('change', handler);
    return () => mq.removeEventListener('change', handler);
  }, [query]);

  return matches;
};

// useBreakpoint.ts
export const useBreakpoint = () => {
  const isMobile = useMediaQuery('(max-width: 639px)');
  const isTablet = useMediaQuery('(min-width: 640px) and (max-width: 1023px)');
  const isDesktop = useMediaQuery('(min-width: 1024px)');
  
  return { isMobile, isTablet, isDesktop };
};

Responsive Component Pattern

interface ResponsiveProps {
  mobile?: ReactNode;
  tablet?: ReactNode;
  desktop: ReactNode;
}

export const Responsive: FC<ResponsiveProps> = ({ mobile, tablet, desktop }) => {
  const { isMobile, isTablet } = useBreakpoint();
  
  if (isMobile && mobile) return <>{mobile}</>;
  if (isTablet && tablet) return <>{tablet}</>;
  return <>{desktop}</>;
};

Key Principles

Common Mistakes

❌ Using max-width (desktop-first) ✅ Using min-width (mobile-first)

❌ Fixed pixel values everywhere ✅ Fluid units (rem, %, vw, clamp)

❌ Hiding content on mobile ✅ Prioritizing and reorganizing content

❌ Breakpoints for specific devices ✅ Breakpoints where design breaks