A media query is a CSS feature used to create responsive websites. It checks a specific condition such as screen width and applies styles only when that condition is true.

Media queries are commonly used to make websites work properly on desktops, tablets, and mobile devices.

Basic Media Query Syntax

@media (condition) {
    selector {
        property: value;
    }
}

Media Query Flow

Screen Size

→

Check Condition

→

Apply CSS

Example: max-width: 768px

Simple Explanation

Suppose the screen width is 768px or less. The media query checks this condition.

If the condition is true, the CSS written inside the media query is applied.

Example: Responsive Card Layout

In the following example, three cards are displayed in one row on larger screens. On smaller screens, the cards become a single-column layout.

.media-demo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.media-card {
    background-color: #2563eb;
    color: white;
    padding: 25px;
    text-align: center;
    border-radius: 8px;
}

@media (max-width: 768px) {

    .media-demo {
        grid-template-columns: 1fr;
    }

    .media-card {
        background-color: #7c3aed;
    }
}

Output

Card 1

Card 2

Card 3

Resize your browser window to see the media query working.

How This Example Works

Default Layout

By default, the cards use grid-template-columns: repeat(3, 1fr), so three cards appear in one row.

Media Query Condition

The condition max-width: 768px means the styles inside the media query will be applied when the viewport width is 768px or smaller.

Mobile Layout

When the screen becomes smaller, the cards change to grid-template-columns: 1fr, so each card appears on a separate row.

Background Color

The default card color is #2563eb. On screens up to 768px, it changes to #7c3aed.

Common Media Query Conditions

Condition	Meaning
`max-width: 768px`	Applies styles up to 768px width
`min-width: 768px`	Applies styles from 768px and above
`max-width: 576px`	Useful for small mobile screens
`min-width: 992px`	Useful for larger screens

Multiple Media Query Conditions

You can combine multiple conditions using and.

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

    .box {
        font-size: 20px;
    }
}

Meaning

The styles will apply only when the screen width is between 576px and 991px.

Real-World Uses of Media Queries

Responsive navigation menus
Mobile-friendly layouts
Responsive card grids
Changing font sizes on smaller screens
Adjusting spacing and padding
Responsive images and containers
Tablet and desktop layouts

Important Note

Media queries do not create a separate website for every device. They allow the same webpage to adapt its styles according to the current viewport or device conditions.

Summary

CSS Media Queries are used to create responsive layouts. They check conditions such as screen width and apply specific CSS rules when those conditions are satisfied. They are an important part of responsive web design for mobile, tablet, and desktop devices.

← Previous: Viewport

Next: Breakpoints →