Ultimate Guide to CSS Media Queries for Responsive Web Design

What Are CSS Media Queries? CSS media queries are rules that let your website detect the type of device or screen size being used and apply specific styles accordingly. It’s how modern websites adapt to phones, tablets, laptops, and desktops.

Step-by-Step: Basic Media Query Example Let’s create a simple webpage that changes its background color and font size on smaller screens. This is perfect for beginners.

Create an HTML File: Save this as index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Query Demo</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Responsive Site</h1>
    <p>This page changes based on screen size.</p>
</body>
</html>

Create a CSS File: Save this as styles.css:

/* Default styles for all screens */
body {
    background-color: white;
    font-size: 16px;
    text-align: center;
}

/* Media query for screens 768px or smaller */
@media (max-width: 768px) {
    body {
        background-color: lightgray;
        font-size: 14px;
    }
}

Test It:

Open index.html in a browser.
Resize the browser window or use developer tools (right-click > Inspect > Toggle Device Toolbar) to simulate a mobile screen (e.g., 768px or less).
Notice the background turns light gray, and the font size shrinks.

/* Apply styles only when screen width is 768px or less */
@media (max-width: 768px) {
    body {
        background-color: lightgray;
        font-size: 14px;
    }
}

Why Are Media Queries Important? Today’s users access websites from various screen sizes. Media queries help ensure your site looks great and functions well everywhere. Without them, your layout may break or be hard to use on smaller screens.

Common CSS Media Query Breakpoints for Responsive Design — Figure 1: Common breakpoints for responsive web design.

Common Breakpoints to Use: While you can customize breakpoints based on your needs, here are some commonly used ones:

max-width: 480px (Mobile phones)
max-width: 768px (Tablets)
max-width: 1024px (Small laptops)
min-width: 1200px (Large screens)

How to Write Media Queries: Media queries use logical expressions to apply styles only if conditions are true. You can check screen width, orientation, resolution, and more. Below are different ways to use media queries with step-by-step examples.

Example 1: Mobile-First Approach with Min-Width The mobile-first approach starts with base styles for smaller screens and progressively adds styles for larger screens using min-width.

Update Your CSS: Modify styles.css to use a mobile-first approach:

/* Base styles for mobile */
body {
    background-color: lightyellow;
    font-size: 14px;
    text-align: center;
}

/* Styles for larger screens */
@media (min-width: 768px) {
    body {
        background-color: white;
        font-size: 16px;
    }
}

Test It:

Open index.html in a browser.
Resize the window or use developer tools to simulate a tablet or desktop (768px or wider).
The background should change to white, and the font size should increase.

Mobile-First CSS Media Query Example — Figure 2: Mobile-first design with min-width media query.

Example 2: Combining Conditions You can combine conditions like width and orientation for more specific styling.

Add to Your CSS: Update styles.css with:

/* Styles for tablets in landscape mode */
@media (min-width: 768px) and (orientation: landscape) {
    body {
        background-color: lightgreen;
        font-size: 18px;
    }
}

Test It:

Open index.html in a browser.
Use developer tools to simulate a tablet (e.g., 768px) in landscape orientation.
The background should turn light green, and the font size should increase.

CSS Media Query for Combined Conditions — Figure 3: Green background applied for tablets in landscape orientation.

Example 3: Media Types Media queries can target different media types like screen, print, or all.

Add Print Styles: Update styles.css to style the page differently when printed:

/* Styles for printing */
@media print {
    body {
        background-color: white;
        color: black;
        font-size: 12pt;
    }
    h1, p {
        color: black;
    }
}

Test It:

Open index.html in a browser.
Use the browser’s print preview (File > Print or Ctrl+P).
The page should have a white background, black text, and a 12pt font size.

CSS Media Query for Print Styles — Figure 4: Print preview with optimized styles.

Example 4: Feature Queries Use @supports to check if a browser supports a CSS feature, like display: flex.

Add to Your HTML: Update index.html to include a flex container:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Query Demo</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Responsive Site</h1>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

Add Feature Query: Update styles.css with:

/* Default styles */
.container {
    display: block;
}
.item {
    background-color: lightblue;
    margin: 10px;
    padding: 10px;
}

/* Apply flexbox if supported */
@supports (display: flex) {
    .container {
        display: flex;
        justify-content: space-around;
    }
}

Test It:

Open index.html in a modern browser (e.g., Chrome, Firefox) that supports flexbox.
The items should display in a row, spaced evenly.
Test in an older browser (if available) to see the fallback block layout.

Using Developer Tools to Test Media Queries

You can use browser developer tools to test how your media queries work across different screen sizes. Here’s how:

Open Developer Tools:

Right-click anywhere on your webpage and select "Inspect".

Right-Click to Inspect Webpage for Media Query Testing — Figure 6: Right-clicking to open the Inspect menu.

Toggle Device Toolbar:

In the developer tools, click the device icon (a rectangle and phone) to enter responsive mode.
Resize the viewport or select a device preset (e.g., iPhone, iPad) to test your media queries.
Watch how your styles change as the screen size adjusts.

Browser Developer Tools for Testing Responsive Media Queries — Figure 7: Using developer tools to test responsive designs.

Best Practices for Media Queries

Use mobile-first design: Start with base styles for small screens, then add media queries for larger devices.
Keep breakpoints meaningful based on content layout, not specific devices.
Avoid too many breakpoints — test with real devices or emulator tools.
Group related queries together to improve readability.

Common Pitfalls to Avoid

Don’t hardcode device widths—new devices come out frequently.
Avoid relying solely on breakpoints to fix layout issues. Structure your HTML and CSS for flexibility.
Use "em" or "rem" units instead of pixels for scalable and accessible design.

Debugging CSS Media Queries in Browser Developer Tools — Figure 8: Debugging responsive styles using browser developer tools.

Final Thoughts: Media queries are essential for creating modern responsive designs. Practice by building layouts and testing across different screen sizes. The more you use them, the more intuitive they become.

About the Author: Zeeshan Ali is a passionate developer with expertise in frontend, backend, AI, and blockchain. Explore my open-source projects and tutorials on GitHub: Zeeshan Ali's GitHub Profile.

Figure 9: Visit Zeeshan Ali’s GitHub for more coding resources.

Ultimate Guide to CSS Media Queries

About Zeeshan Ali

More from Zeeshan Ali