CSS Media Queries

Written by Swapnil RajaUpdated 30 Jul 2026

CSS Media Queries are used to apply different styles based on device type, screen size, resolution, or orientation.

CSS Media Queries are used to apply different styles based on the device type, screen size, resolution, or orientation.

Media Queries are the foundation of Responsive Web Design (RWD) because they allow a website to adapt to different devices such as: The supporting concepts are explained in Responsive Layout and Mobile First Design.

Mobile phones
Tablets
Laptops
Desktop computers
Large screens

Instead of creating separate websites for different devices, Media Queries allow a single website to respond dynamically to various screen sizes.

Syntax

Media Query Syntax

css

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

PreviousMotion Paths NextResponsive Layout

Feature	Description	Example
max-width	Applies styles up to a specified width	max-width: 768px
min-width	Applies styles from a specified width and above	min-width: 768px
orientation	Detects portrait or landscape mode	orientation: landscape
max-height	Applies styles up to a specified height	max-height: 600px
min-height	Applies styles from a specified height and above	min-height: 600px

CSS Media Queries Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Media Queries Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: white;
        }
        .container {
            width: 80%;
            margin: auto;
            padding: 20px;
            background-color: lightgray;
        }
        @media (max-width: 768px) {
            .container {
                width: 100%;
                background-color: lightblue;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        Resize the browser window to see the effect.
    </div>
</body>
</html>

Device	Width
Mobile	Up to 480px
Tablet	481px - 768px
Small Laptop	769px - 1024px
Desktop	1025px and above

CSS Media Queries

Syntax

Attributes

Example

Output

Browser Output

Browser Support

Notes

Mobile Screen Example

Tablet Screen Example

Landscape Mode Example

Common Breakpoints

Conclusion