Frontend Responsive

Responsive design adapts layouts to different screen sizes using CSS media queries, Tailwind responsive utilities, and flexible grid systems. Build mobile-first by starting with small screens, then add breakpoints for larger devices using min-width media queries and Tailwind's responsive prefixes like md: and lg: to progressively enhance the layout.

Mobile-first means designing base styles for small screens first, then using CSS media queries or Tailwind responsive classes to adapt at larger breakpoints. Use relative units, flexible containers with CSS Grid and Flexbox, and Tailwind's breakpoint-prefixed utilities to adjust spacing, sizing, and layout as viewport width increases.

Use srcset and sizes attributes on image tags to serve appropriately-sized images for each device. Combine with responsive layout techniques—fluid widths with max-width constraints, clamp() for typography scaling, and proper viewport meta tags—to ensure images scale efficiently without wasting bandwidth or distorting on any screen.

Container queries allow components to adapt based on their parent container width rather than viewport size, complementing media queries for more modular responsive layouts. Use them alongside media queries, Flexbox, and Grid when building self-contained responsive components across breakpoints.

Responsive layouts must maintain touch-friendly interaction targets of at least 44x44 pixels, readable font sizes across breakpoints using clamp(), and logical navigation patterns. Ensure proper viewport meta tags, semantic HTML, and keyboard navigation work seamlessly as the layout adapts from mobile to desktop.

Responsive navigation adapts from mobile hamburger menus to full horizontal navbars using media queries and Tailwind responsive utilities. Implement touch-friendly targets on mobile, collapsible menus, and full navigation display on larger screens while maintaining accessibility and keyboard navigation across all sizes.