CSS RWD Media Query

Quiz

In Responsive Web Designing, media queries rules are used to conditionally apply styles for specific screen widths, aspect ratios and resolutions. In this chapter, we will learn how to design a responsive web page using media query rule.

What is Media Query?

Media queries in CSS are used to apply different CSS styles based on the screen size, resolution, and other characteristics of the users device. Media queries use the @media rule to include an extra block of CSS properties when certain conditions are met.

Adding a Breakpoint

In responsive design, a breakpoint is a specific screen width where the layout changes to suit better to the screen size. We can add breakpoint by defining a media query with a maximum or minimum width. Following code shows the exact syntax.

/* Example of a breakpoint for screens smaller than 768px */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

In this example, when the screen width is 768px or smaller, the `.container` layout changes to a column direction.

Media Query Setting Width Limit

We can set the width limit in media queries for applying styles only within specific screen width ranges. We define a minimum and a maximum width, to control the layout and appearance of elements within the desired screen size range.

Example

Here is an example, in which the body's background color changes to plum when the viewport width is wider than 35em and narrower than 85em.

<!DOCTYPE html>
<html>

<head>
<style>
    body {
        background-color: white; /* Default background */
    }

    @media (min-width: 35em) and (max-width: 85em) {
        body {
            background-color: plum; 
        }
    }
</style>
</head>
<body>
    <h1>Media Query Width Limit Example</h1>
    <p>
        Resize the browser window to see the background 
        color change.
    </p>
    <p> 
        <b> Note: </b>
        If you can't resize here, Run in Tutorials point HTML compiler
    </p>
</body>

</html>

Media Query Multiple Breakpoints

We can use multiple breakpoints in media queries to design layout styling for different screen sizes, and condition of user devices. Let's understand this with an example.

Example

In this example, we have defined three breakpoints to adjust the font size and layout for small, medium, and large screens.

<!DOCTYPE html>
<html>

<head>
<style>
    body {
        font-size: 16px; /* Default font size */
    }

    /* Small screens (up to 600px wide) */
    @media (max-width: 600px) {
        body {
            font-size: 14px;
        }
    }

    /* Medium screens (601px to 900px wide) */
    @media (min-width: 601px) and (max-width: 900px) {
        body {
            font-size: 16px;
        }
    }

    /* Large screens (901px and up) */
    @media (min-width: 901px) {
        body {
            font-size: 18px;
        }
    }
</style>
</head>
<body>
    <h1>Multiple Breakpoints Example</h1>
    <p>
        Resize the browser window to see the background 
        color change.
    </p>
    <p> 
        <b> Note: </b>
        If you can't resize here, Run in Tutorials point HTML compiler
    </p>
</body>

</html>

CSS Media Queries For Screen Orientation

We can define style for specific orientation (landscape or portrait) of user device. The default value for this is portrait.

@media (orientation: portrait) {
    /* Styles */
}

Example

The following example demonstrates that when the screen width is greater than 500px and the device is in landscape orientation, the text color changes to blue.

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            color: red;
        }
        @media (min-width: 500px) and (orientation: landscape) {
            body {
                color: blue;
            }
        }
    </style>
</head>

<body>
    <h3>Resize the browser window to see the effect.</h3>
    <p>
        The text color changed to blue when the viewport width is 
        at least 500px and the device is in landscape orientation.
    </p>
    <p> 
    <b> Note: </b>
        If you can't resize here, Run in Tutorials point HTML compiler
</p>
</body>

</html>

Print Page