Media Query vs. Container Query

by Kuligaposten 2025-02-19

Both media queries and container queries are used in CSS for responsive design, but they serve different purposes.

Features in this Demo:

  • Media Query changes the background color based on the viewport width
  • Container Query changes the card's background and padding when the parent container width reaches 500px
  • JavaScript Toggle Button to resize the container between

Full HTML + CSS + JavaScript

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap Media & Container Query Demo</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <style>
      body {
        background-color: lightgray;
        font-family: Arial, sans-serif;
        padding: 20px;
        transition: background-color 0.3s ease-in-out;
      }

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

      .container-box {
        container-type: inline-size;
        width: 300px;
        max-width: 600px;
        border: 2px solid black;
        padding: 20px;
        margin: 20px auto;
        transition: width 0.3s ease-in-out;
      }

      .card {
        padding: 20px;
        background: white;
        text-align: center;
        transition:
          background-color 0.3s ease-in-out,
          padding 0.3s ease-in-out;
      }

      @container (min-width: 500px) {
        .card {
          background-color: lightblue;
          padding: 40px;
        }
      }
    </style>
  </head>
  <body class="text-center">
    <div class="container">
      <h2 class="my-4">Media Query Example</h2>
      <p class="lead">Resize the browser to see the background color change.</p>

      <h2 class="my-4">Container Query Example</h2>
      <p class="lead">Click the button to resize the container.</p>

      <button id="toggleSize" class="btn btn-primary mb-3">
        Toggle Container Size
      </button>

      <div class="container-box">
        <div class="card">Resize the container to see changes!</div>
      </div>
    </div>

    <script>
      document
        .getElementById("toggleSize")
        .addEventListener("click", function () {
          const container = document.querySelector(".container-box");
          if (container.style.width === "600px") {
            container.style.width = "300px";
          } else {
            container.style.width = "600px";
          }
        });
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

How It Works

  1. Media Query (@media (min-width: 768px)):

    • Changes the background color of <body> when the viewport width is 768px or more.

  2. Container Query (@container (min-width: 500px)):

    • Changes the background color and padding of .card when the container width reaches 500px.

  3. JavaScript Toggle:

    • The button toggles the container size between 300px and 600px.
    • When the container reaches 500px, the card's background and font size changes because of the container query.

Try It!

  • Resize the browser → See the background change (Media Query).
  • Click the button → See the card style change (Container Query).

This is a great way to visually understand the difference between Media Queries (Viewport) and Container Queries (Parent Element)!

Media Query Example

Resize the browser to see the background color change.

Container Query Example

Click the button to resize the container.

Resize the container to see changes!
Back to Home