Responsive Design with Media Queries

Responsive Design with Media Queries

Responsive design makes your pages look good on every screen size - phones, tablets, laptops, and desktops. Media queries are the CSS feature that makes this possible.

The Viewport Meta Tag

Before media queries work, you need the viewport meta tag. Without it, mobile browsers render pages at desktop width and scale them down.

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

This tells the browser to set the viewport width to the device width and start at 100% zoom.

Basic Media Queries

Media queries apply styles based on screen characteristics. Use a mobile-first approach - write base styles for mobile and add breakpoints for larger screens.

/* Base styles - mobile first */
.container {
    padding: 1rem;
}

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

/* Tablet */
@media (min-width: 768px) {
    .container {
        padding: 2rem;
        max-width: 720px;
        margin: 0 auto;
    }
    .grid {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.5rem;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        max-width: 960px;
    }
}

Common Breakpoints

These are widely used breakpoints, but base yours on your content, not specific devices:

/* Small phones: 0 - 479px (base mobile styles) */
/* Large phones: 480px and up */
@media (min-width: 480px) { ... }

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

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

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

Responsive Images

Make images responsive to avoid overflow on small screens:

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

.hero-image {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

Practical Tips

Test on real devices or use browser dev tools. Design for content first - let breakpoints follow your layout needs, not device dimensions. Use relative units (rem, %) so text scales with user preferences.

Key Points

• The viewport meta tag is required for responsive design on mobile.
• Use min-width media queries for a mobile-first approach.
• Common breakpoints: 480px (phone), 768px (tablet), 1024px (laptop).
• max-width: 100% on images prevents overflow on small screens.
• Base breakpoints on content needs, not specific device sizes.