Responsive Design — Explained with Examples

Responsive design makes web layouts adapt to any screen size using fluid grids, flexible images, and CSS media queries.

Responsive design, coined by Ethan Marcotte, uses three core techniques: fluid grids (proportional sizing with percentages instead of pixels), flexible images (max-width: 100% so images scale with containers), and media queries (CSS rules that apply based on viewport width, device features, or orientation). Breakpoints define where the layout changes — common sizes are 480px, 768px, 1024px, and 1200px.

Think of responsive design like water in different containers. Water fills a glass, a bowl, or a vase — the shape changes but the content remains. A responsive website rearranges its components to fit the available space, ensuring readability and usability whether on a phone, tablet, or desktop monitor.

Modern responsive approaches combine CSS Grid, Flexbox, and container queries for more granular control. The meta viewport tag ensures mobile browsers render at the correct scale.

/* Responsive layout with CSS Grid */
.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

/* Media queries for breakpoints */
/* Mobile first: base styles are for small screens */

/* Tablet */
@media (min-width: 768px) {
    .sidebar {
        display: block;
        width: 250px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* Flexible images */
img {
    max-width: 100%;
    height: auto;
}

<!-- Required for responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Responsive design is not optional in today’s multi-device world. Google uses mobile-first indexing, and users expect seamless experiences across all devices.

Mobile-First Design, CSS Preprocessor, SPA, Accessibility

Mobile-First Approach