CSS Media Queries – Examples

Media queries are a core part of responsive web design, enabling developers to adapt layouts and styles to different devices, screen sizes, and resolutions. Below are practical examples to help you implement media queries effectively in your projects.

Example 1: Responsive Typography

Adjust font sizes based on the screen width.

CSS:

/* Default font size for small screens */
body {
    font-size: 14px;
}

/* Medium screens (min-width: 768px) */
@media (min-width: 768px) {
    body {
        font-size: 16px;
}

/* Large screens (min-width: 1024px) */
@media (min-width: 1024px) {
    body {
        font-size: 18px;
}

Explanation:

  • Small devices (mobile phones) use 14px font size.
  • Tablets have a slightly larger font at 16px.
  • Desktops use 18px for better readability.

Example 2: Responsive Navigation Bar

Create a navigation bar that switches from horizontal to vertical on smaller screens.

HTML:

<nav class="navbar">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
</nav>

CSS:

/* Default style for larger screens */
.navbar {
    display: flex;
    justify-content: space-around;
    background-color: #333;
    padding: 10px;
}

.navbar a {
    color: white;
    text-decoration: none;
    padding: 10px;
}

/* Small screens (max-width: 600px) */
@media (max-width: 600px) {
    .navbar {
        flex-direction: column;
        align-items: center;
    }

    .navbar a {
        padding: 5px;
        text-align: center;
        width: 100%;
    }
}

Explanation:

  • On larger screens, the navigation bar is horizontal.
  • On smaller screens, the layout switches to a vertical stack for easier usability.

Example 3: Image Grid

Create an image gallery that adjusts the number of columns based on screen size.

HTML:

<div class="gallery">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <img src="image4.jpg" alt="Image 4">
</div>

CSS:

/* Default style for small screens */
.gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

/* Medium screens (min-width: 600px) */
@media (min-width: 600px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large screens (min-width: 900px) */
@media (min-width: 900px) {
    .gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

Explanation:

  • Mobile screens display images in a single column.
  • Tablets display two columns.
  • Desktops display four columns for better use of screen space.

Example 4: Dark Mode Switch

Apply a dark theme when the user’s device is set to dark mode.

CSS:

/* Light theme (default) */
body {
    background-color: white;
    color: black;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}

Explanation:

  • The prefers-color-scheme media query detects the user’s system preference.
  • Automatically switches to dark mode if enabled on the device.

Example 5: Device Orientation

Change the layout based on whether the device is in portrait or landscape mode.

CSS:

/* Portrait mode */
@media (orientation: portrait) {
    body {
        background-color: lightblue;
    }
}

/* Landscape mode */
@media (orientation: landscape) {
    body {
        background-color: peachpuff;
    }
}

Explanation:

  • The layout adapts to the device orientation by changing the background color.

Example 6: Responsive Card Layout

Design a card layout that adjusts based on screen size.

HTML:

<div class="card-container">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
</div>

CSS:

/* Default style (mobile-first) */
.card-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.card {
    padding: 20px;
    background-color: #f4f4f4;
    border: 1px solid #ddd;
}

/* Tablets (min-width: 768px) */
@media (min-width: 768px) {
    .card-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktops (min-width: 1024px) */
@media (min-width: 1024px) {
    .card-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

Explanation:

  • Cards stack in a single column on small screens.
  • On larger screens, they arrange into two or three columns.

Example 7: Custom Breakpoints

Define breakpoints tailored to your design needs.

CSS:

/* Extra small devices (max-width: 480px) */
@media (max-width: 480px) {
    body {
        background-color: lightgray;
    }
}

/* Small devices (max-width: 768px) */
@media (max-width: 768px) {
    body {
        background-color: lightyellow;
    }
}

/* Large devices (min-width: 1024px) */
@media (min-width: 1024px) {
    body {
        background-color: lightgreen;
    }
}

Explanation:

  • Define custom breakpoints based on your specific project requirements.

Example 8: Responsive Buttons

Create buttons that resize on different devices.

CSS:

/* Default button style */
button {
    padding: 10px 20px;
    font-size: 14px;
}

/* Medium screens (min-width: 600px) */
@media (min-width: 600px) {
    button {
        padding: 12px 24px;
        font-size: 16px;
    }
}

/* Large screens (min-width: 900px) */
@media (min-width: 900px) {
    button {
        padding: 14px 28px;
        font-size: 18px;
    }
}

Conclusion

These examples showcase how media queries allow you to create responsive and adaptive designs for various scenarios. For a deeper dive into web development, check out The Coding College for tutorials, guides, and resources!

Leave a Comment