Responsive Web Design: Building for All Devices

What is Responsive Design?

Responsive web design ensures your website looks and works great on all devices—from mobile phones to large desktop monitors.

The Viewport Meta Tag

Always include this in your HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Mobile-First Approach

Start with mobile styles, then add complexity for larger screens:

/* Base styles (mobile) */
.container {
    padding: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
    .container {
        padding: 2rem;
    }
}

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

Common Breakpoints

/* Small phones */
@media (min-width: 320px) { }

/* Large phones */
@media (min-width: 480px) { }

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

/* Laptops */
@media (min-width: 1024px) { }

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

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

Flexible Images

img {
    max-width: 100%;
    height: auto;
}

Responsive Typography

/* Using clamp for fluid typography */
h1 {
    font-size: clamp(1.5rem, 4vw, 3rem);
}

p {
    font-size: clamp(1rem, 2vw, 1.125rem);
}

Responsive Grid

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

Responsive Navigation

.nav {
    display: flex;
    flex-direction: column;
}

.nav-links {
    display: none;
}

.menu-toggle {
    display: block;
}

@media (min-width: 768px) {
    .nav {
        flex-direction: row;
        justify-content: space-between;
    }

    .nav-links {
        display: flex;
        gap: 1rem;
    }

    .menu-toggle {
        display: none;
    }
}

Container Queries

Modern CSS allows queries based on container size:

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

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

Best Practices

1. Design mobile-first, then enhance
2. Use relative units (rem, em, %, vw)
3. Test on real devices, not just browser resize
4. Consider touch targets (minimum 44px)
5. Optimize images for different screen sizes
6. Use CSS Grid/Flexbox for layouts

Testing Tools

• Browser DevTools device emulation
• Real device testing
• BrowserStack or similar services

Use our PX to REM Converter for converting pixel values.