CSS Media Queries (original) (raw)

Last Updated : 21 Jan, 2026

CSS Media Queries enable web pages to adjust their layout and styles based on different screen sizes, devices, or orientations. They are essential for building responsive and adaptable web designs.

• Apply CSS rules conditionally based on screen width or height.
• Help create responsive layouts for mobile, tablet, and desktop devices.
• Support conditions like orientation, resolution, and device type.
• Improve user experience across different devices. HTML `

<style>
    .gfg {
        color: black;
    }
    @media screen and (max-width: 500px) {
        .gfg {
            color: green;
        }
    }
</style>

`

• Media queries apply CSS rules based on device characteristics like screen width.
• In your code, screens ≤500px wide change .gfg text color to green.

**Syntax:

@media mediatype and (condition) { /* CSS styles */}

**Note: It is compulsory to add the viewport meta tag for media queries to work correctly. Learn more about it here.

Media types specify which devices the styles should apply to. Commonly used types include:

Media Queries for Multiple Screen Sizes

HTML `

<style>
    .gfg {
        color: black;
    }
    @media screen and (max-width: 800px) {
        .gfg {
            color: blue;
        }
    }
    @media screen and (max-width: 500px) {
        .gfg {
            color: green;
        }
    }
</style>

`

• Styles adjust dynamically based on screen width using media queries.
• For screens 800px or smaller, the text color changes to blue.
• For screens 500px or smaller, the text color changes to green.

Media Queries for Multiple Screen Sizes with Additional Styles

HTML `

<style>
    .gfg {
        color: black;
        font-size: 20px;
        padding: 10px;
    }
    @media screen and (max-width: 800px) {
        .gfg {
            color: blue;
            font-size: 18px;
        }
    }
    @media screen and (max-width: 500px) {
        .gfg {
            color: green;
            font-size: 16px;
            text-align: center;
        }
    }
</style>

`

• Styles dynamically adjust based on screen width using media queries.
• For screens 800px or smaller, the text color becomes blue, and the font size decreases to 18px.
• For screens 500px or smaller, the text color changes to green, the font size reduces to 16px, and the text is center-aligned.

Media queries allow developers to check various device characteristics. Here are some important features: