CSS Media Queries

A Media Query checks the characteristics of the user's device and applies CSS rules only when the specified condition is true.

Why Use Media Queries?

• Create mobile-friendly websites.
• Improve user experience.
• Support different screen sizes.
• Build responsive layouts.
• Reduce the need for separate mobile websites.

Desktop

↓

Tablet

↓

Mobile

Media Queries begin with the @media rule followed by a condition and the CSS styles to apply.

@media (max-width:768px){

    body{

        background:#f8f9fa;

    }

}

The max-width condition applies CSS rules when the screen width is less than or equal to the specified value.

@media (max-width:768px){

    h1{

        font-size:24px;

    }

}

The min-width condition applies CSS rules when the screen width is greater than or equal to the specified value.

@media (min-width:992px){

    body{

        background:#ffffff;

    }

}

Developers commonly use breakpoints to target different screen sizes such as mobile phones, tablets, laptops, and desktop computers.

/* Mobile */

@media(max-width:767px){}

/* Tablet */

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

/* Desktop */

@media(min-width:1200px){}

You can combine multiple media conditions using the and keyword. This allows CSS to apply styles only when all specified conditions are true.

@media (min-width:768px) and
(max-width:991px){

    body{

        background:#e9ecef;

    }

}

Media Queries are commonly used to make navigation menus responsive by changing their layout on smaller screens.

nav{

    display:flex;

    justify-content:space-between;

}

@media(max-width:768px){

    nav{

        flex-direction:column;

    }

}

Media Queries can change Flexbox and Grid layouts according to the screen size.

Flexbox Example

.container{

    display:flex;

}

@media(max-width:768px){

    .container{

        flex-direction:column;

    }

}

Grid Example

.gallery{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

}

@media(max-width:768px){

    .gallery{

        grid-template-columns:1fr;

    }

}

Example 1: Hide Sidebar on Mobile

@media(max-width:768px){

    .sidebar{

        display:none;

    }

}

Example 2: Change Font Size

@media(max-width:600px){

    h1{

        font-size:24px;

    }

}

Example 3: Responsive Button

@media(max-width:576px){

    .btn{

        width:100%;

    }

}

@media (orientation:landscape){

    body{

        background:#f8f9fa;

    }

}

Following best practices helps you write clean, efficient, and maintainable Media Queries for responsive websites.

• Use a mobile-first approach whenever possible.
• Keep breakpoints consistent throughout the project.
• Use relative units like em and rem.
• Avoid writing unnecessary Media Queries.
• Group similar Media Queries together.
• Test layouts on different devices and browsers.
• Combine Flexbox or Grid with Media Queries.
• Keep CSS organized for easy maintenance.

❌ Incorrect

.box{

    width:900px;

}

✔ Correct

.box{

    width:100%;

    max-width:900px;

}

CSS Media Queries are supported by all modern web browsers, making them one of the most reliable responsive design features.

1. What is a CSS Media Query?
2. Why are Media Queries used?
3. What is the difference between max-width and min-width?
4. What are breakpoints in Responsive Web Design?
5. What is the mobile-first approach?
6. How do you combine multiple Media Query conditions?
7. What is the purpose of the orientation feature?
8. Can Media Queries be used with Flexbox and Grid?
9. How do Media Queries improve user experience?
10. Which CSS rule begins every Media Query?

In this lesson, you learned:

• ✔ Introduction to CSS Media Queries.
• ✔ Media Query Syntax.
• ✔ max-width and min-width.
• ✔ Common Device Breakpoints.
• ✔ Combining Media Conditions.
• ✔ Responsive Navigation.
• ✔ Responsive Flexbox and Grid.
• ✔ Practical Examples.
• ✔ Best Practices and Common Mistakes.
• ✔ Browser Support and Interview Questions.