Media Query

Media queries in CSS allow us to apply different styles based on various characteristics of the user's device, such as screen width, height, device orientation, and more.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Query</title>
<style>
    /* Default styles for all screen sizes */
    .parent-container {
        font-family: Arial, sans-serif, Roboto;
        background-color: #F5F5F5;
        color: #fff;
        padding: 10px;
    }

    /* Media query for screens narrower than 576px */
    @media screen and (max-width: 576px) {
        .parent-container {
            font-size: 14px;
        }
    }

    /* Media query for screens between 576px and 876px */
    @media screen and (min-width: 576px) and (max-width: 876px) {
        .parent-container {
            font-size: 18px;
        }
    }

    /* Media query for screens wider than 876px */
    @media screen and (min-width: 876px) {
        .parent-container {
            font-size: 22px;
        }
    }
</style>
</head>
<body>

<div class="parent-container">
  <h1>Media Query Heading</h1>
  <p>This is a paragraph. Its font size will change based on the width of the screen.</p>
</div>
</body>
</html>

Output:


 Media Query Heading
 This is a paragraph. Its font size will change based on the width of the screen.

Note:

Media queries are incredibly powerful for creating responsive designs that adapt to different devices and screen sizes.

They enable us to create layouts that look good on everything from small mobile screens to large desktop monitors.

<-- Animation