Learn the concept
Responsive Design Fundamentals
Use media queries to apply different styles at different screen sizes, flexible units (%, rem, vw/vh) instead of fixed pixels, Flexbox/Grid for fluid layouts, and the viewport meta tag. Mobile-first design starts with small screens and adds complexity for larger ones.
Responsive design ensures websites work across all screen sizes.\n\nKey techniques:\n\n1. Viewport meta tag (required):\n <meta name="viewport" content="width=device-width, initial-scale=1">\n\n2. Media queries — apply styles conditionally:\n - Mobile-first: start small, add min-width queries\n - Desktop-first: start large, add max-width queries\n\n3. Container Queries — apply styles based on a parent container's size, not the viewport. Enables more modular and reusable components.\n\n4. Flexible units:\n - % — relative to parent\n - rem — relative to root font size\n - em — relative to parent font size\n - vw/vh — viewport width/height\n - clamp() — responsive with min/max bounds\n\n5. Fluid layouts: Flexbox wrap and CSS Grid auto-fit/auto-fill\n\n6. Responsive images: max-width: 100%, srcset, <picture>\n\nCommon breakpoints:\n- Mobile: < 640px\n- Tablet: 640px – 1024px\n- Desktop: > 1024px
/* Mobile-first approach */
.container {
padding: 1rem;
max-width: 1200px;
margin: 0 auto;
}
/* Single column on mobile, multi on larger */
.grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr; /* mobile: 1 column */
}
@media (min-width: 640px) {
.grid {
grid-template-columns: repeat(2, 1fr); /* tablet: 2 columns */
}
}
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(3, 1fr); /* desktop: 3 columns */
}
}
/* Responsive font sizes with clamp */
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
/* min 1.5rem, scales with viewport, max 3rem */
}That adapts its product listings, navigation, and checkout process seamlessly from mobile phones to large desktop displays.
Where articles and sidebars rearrange and resize to provide an optimal reading experience on any device.
That displays complex data visualizations and controls in a user-friendly manner across various screen resolutions.
Design a blog layout that uses media queries and fluid grids to adapt to different screen widths, showcasing responsive design principles.
Develop a personal portfolio website that is fully responsive, looking great on mobile, tablet, and desktop devices.
Google's search results page, Gmail, and Google Maps are prime examples of highly responsive web applications that provide tailored experiences across a vast array of devices and screen sizes.
The New York Times website implements sophisticated responsive design to deliver news content effectively on everything from smartphones to tablets and desktops, ensuring readability and accessibility for all users.