Prev Next

CSS Media Queries

CSS Media Queries enable responsive designs by applying styles based on the characteristics of the user's device, such as screen width, height, orientation, and resolution. They ensure that websites look great and function effectively on devices of all sizes.

Key Topics

Basic Media Queries

A basic media query uses the @media rule to apply styles based on a condition, such as screen width.

<style>
        body {
            background-color: #FFFFFF;
            color: #000000;
        }
        @media (max-width: 600px) {
            body {
                background-color: #007BFF;
                color: #FFFFFF;
            }
        }
</style>
<div>Resize the browser to see the background color change.</div>

Explanation: The background color changes to blue, and the text color changes to white when the screen width is 600px or smaller.

Min and Max Width Queries

Use min-width and max-width queries to target specific screen sizes or ranges.

<style>
        .responsive-box {
            width: 100%;
            background-color: #F0F0F0;
        }
        @media (min-width: 768px) {
            .responsive-box {
                width: 50%;
                background-color: #28A745;
            }
        }
</style>
<div class="responsive-box">Resize the screen to see the box size and color change.</div>

Explanation: The element changes its width and background color when the screen width is 768px or larger.

Orientation Queries

Orientation queries apply styles based on the device orientation (landscape or portrait).

<style>
        @media (orientation: landscape) {
            body {
                background-color: #FFD700;
            }
        }
        @media (orientation: portrait) {
            body {
                background-color: #FF5733;
            }
        }
</style>
<div>Change the device orientation to see the background color adjust.</div>

Explanation: The background color switches to yellow in landscape mode and orange in portrait mode, adapting to the device orientation.

Feature Queries

Feature queries use the @supports rule to apply styles only if a specific CSS feature is supported by the browser.

<style>
        @supports (display: grid) {
            .feature-box {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
                background-color: #28A745;
            }
        }
        .feature-box div {
            background-color: #FFFFFF;
            padding: 10px;
            text-align: center;
        }
</style>
<div class="feature-box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Explanation: The @supports rule checks if the browser supports CSS Grid and applies the styles if it does.

Key Takeaways

  • Basic Queries: Use media queries to apply styles based on screen characteristics like width and orientation.
  • Responsive Design: Leverage min-width and max-width queries for scalable layouts.
  • Orientation Adaptation: Use orientation queries to style elements for landscape or portrait modes.
  • Feature Detection: Apply styles conditionally using @supports for feature detection.
  • Flexible Layouts: Media queries ensure a seamless user experience across devices of different sizes and capabilities.
Prev Next