CSS Media Queries

What are CSS Media Queries?

CSS Media Queries allow you to apply CSS styles based on the screen size, resolution, or device type.

They are the foundation of responsive web design.

• Design for mobile, tablet, and desktop
• Improve user experience
• Avoid separate websites for devices

Why Media Queries are Important?

• Mobile users are more than desktop users
• One design cannot fit all screen sizes
• Improves readability and navigation
• Essential for modern websites

Basic Syntax of Media Queries

@media (condition) {
    /* CSS rules */
}

                

The condition usually checks the screen width using min-width or max-width.

Media Queries Based on Screen Width

@media (max-width: 600px) {
    body {
        background-color: #f1f5f9;
    }
}

                

This CSS applies only when the screen width is 600px or less.

Common Responsive Breakpoints

• Mobile: max-width: 600px
• Tablet: max-width: 900px
• Laptop: max-width: 1200px
• Desktop: min-width: 1200px

Responsive Layout Example

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
    }
}

                

On desktop → 3 columns
On mobile → 1 column

Media Queries Based on Orientation

@media (orientation: landscape) {
    body {
        background-color: #e0f2fe;
    }
}

                

Useful for tablets and mobile games.

Mobile-First Design Approach

Mobile-first means designing for small screens first, then enhancing for larger screens.

/* Mobile default */
.card {
    font-size: 14px;
}

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

                

Best Practices for Media Queries

• Use mobile-first approach
• Avoid too many breakpoints
• Test on real devices
• Combine with Flexbox & Grid