An approach to web design that makes pages adapt and look good on all devices and screen sizes.
Responsive design is building websites that automatically adapt to different screen sizes - desktop, tablet, mobile. One website, multiple layouts.
Before responsive design, developers built separate mobile sites (m.example.com). Now, one site works everywhere.
Use flexible layouts, images, and CSS media queries to adjust content based on screen size. Do not build for specific devices - build for any screen size.
Design for mobile first, then enhance for larger screens. Mobile constraints force you to prioritize content.
Mobile First: Base styles for small screens, add complexity for larger screens.
Desktop First: Base styles for desktop, remove features for mobile (harder).
Most developers now use mobile-first approach.
Fluid Grids: Use percentages instead of fixed pixels. Content scales with screen size.
Flexible Images: Images resize to fit container. Use max-width: 100% to prevent overflow.
Media Queries: Apply different styles based on screen width.
CSS rules that apply only at specific screen sizes:
No related topics found.
/* Mobile styles (default) */
.container { width: 100%; }
/* Tablet */
@media (min-width: 768px) {
.container { width: 750px; }
}
/* Desktop */
@media (min-width: 1024px) {
.container { width: 1000px; }
}
Mobile: 0-767px Tablet: 768-1023px Desktop: 1024px+
These are guidelines, not rules. Base breakpoints on your content, not specific devices.
Use srcset to serve different image sizes based on screen:
<img src="small.jpg"
srcset="medium.jpg 768w, large.jpg 1024w"
alt="Responsive image">
Saves bandwidth on mobile, shows high-quality images on desktop.
Flexbox: One-dimensional responsive layouts.
CSS Grid: Two-dimensional responsive layouts.
Container Queries: Apply styles based on container size, not viewport (new feature).
Browser DevTools: Built-in device emulation in Chrome, Firefox.
Real Devices: Test on actual phones and tablets.
BrowserStack: Test across hundreds of devices and browsers.
Fixed Widths: Using px everywhere prevents responsiveness.
Ignoring Touch: Desktop hover effects do not work on mobile.
Tiny Text: Text readable on desktop but too small on mobile.
Hidden Content: Hiding too much on mobile frustrates users.
Touch Targets: Buttons should be at least 44x44px for easy tapping.
Performance: Mobile networks are slower. Optimize images and code.
Navigation: Hamburger menus for mobile, full navigation for desktop.
Responsive design is not optional. Over 60% of web traffic comes from mobile. Non-responsive sites frustrate users and rank lower in search.
Learning responsive design is essential for any frontend developer. Every modern website must be responsive.