CSS Responsive Design

CSS Media Queries

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;
    }
}

Media Query Example

css

@media (max-width: 768px) {
    body {
        background-color: lightblue;
    }
}

Changes the background color when the screen width is 768px or smaller.

Attributes

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

Example

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>

Output

Browser Output

css

On large screens:
Container width = 80%
Background = Light Gray

On screens 768px or smaller:
Container width = 100%
Background = Light Blue

The layout automatically adapts to smaller screens

Browser Support

Feature	Chrome	Edge	Firefox	Safari
@media	1	12	1	3

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

Notes

Mobile Screen Example

css

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
}

Applies styles only on small mobile devices.

Tablet Screen Example

css

@media (min-width: 768px) {
    body {
        font-size: 16px;
    }
}

Applies styles for tablets and larger devices.

Landscape Mode Example

css

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

Applies styles when the device is in landscape orientation.

Common Breakpoints

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

Conclusion

CSS Media Queries are essential for building responsive websites that adapt to different screen sizes and devices. By using conditions such as max-width, min-width, and orientation, you can create layouts that provide an optimal user experience across mobile phones, tablets, laptops, and desktops.

PreviousMotion Paths NextResponsive Layout