CSS Media Queries Explained with Examples

What are CSS Media Queries?

CSS Media Queries are rules that allow developers to apply CSS styles based on device characteristics such as screen width, height, orientation, or resolution. They are the backbone of responsive web design, ensuring websites look great on mobiles, tablets, laptops, and desktops.

Why are Media Queries Helpful?

• ✅ Make websites mobile-friendly.
• ✅ Improve user experience on different devices.
• ✅ Follow Google’s mobile-first indexing SEO rules.
• ✅ Save time by writing adaptive styles instead of building separate mobile sites.

Basic Syntax of a Media Query

    @media (condition) {
        /* CSS styles go here */
    }
      

Example: Applying styles only when the screen width is less than 768px:

    @media (max-width: 768px) {
        body {
            background-color: lightblue;
        }
    }
      

Result: On mobile or smaller screens, the background becomes light blue.

Real-Time Examples of Media Queries

1. Mobile First Design

    /* Base (Mobile) */
    body {
        font-size: 14px;
    }

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

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

Result: Font size scales up as screen width increases.

2. Responsive Navigation

    /* Hide menu on mobile */
    @media (max-width: 600px) {
        nav ul {
            display: none;
        }
    }

    /* Show menu on larger screens */
    @media (min-width: 601px) {
        nav ul {
            display: flex;
        }
    }
  

Result: Collapsed menu on mobile, full navigation on desktop.

Popular Media Query Breakpoints