A Comprehensive Guide to Container Query and Media Query 🖥️📱

Introduction

Container queries and media queries are both useful tools for creating responsive designs. The main difference between the two is that media queries apply styles based on the viewport size or other device characteristics, while container queries apply styles based on the size of an element’s container.

Why container query?

1. Container queries allow you to apply styles to an element based on the size of its container.

2. This is an alternative to media queries, which apply styles based on the viewport size or other device characteristics.

3. To use container queries, you need to declare a containment context on an element using the container-type property.

4. Then, you can use the @container at-rule to define a container query that applies styles based on the size of the nearest ancestor with a containment context.

Read more: A guide to CSS container queries

Here’s an example of using container queries to create a responsive card component:

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

.post {
  container-type: inline-size;
}

.card h2 {
  font-size: 1em;
}

@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

In this example, we create a containment context on the .post element using the container-type property. Then, we use the @container at-rule to define a container query that applies styles to elements based on the size of the nearest ancestor with a containment context.

Specifically, this query will apply a larger font size for the card title if the container is wider than 700px.

Using container queries, the card can be reused in multiple areas of a page without needing to know specifically where it will be placed each time.

If the container with the card is narrower than 700px, the font of the card title will be small, and if the card is in a container that’s wider than 700px, the font of the card title will be bigger.

And Media Queries?

Media queries are a CSS technique that allows you to apply styles depending on a device’s general type (such as print vs. screen) or other characteristics such as screen resolution or browser viewport width1.

They are used to conditionally apply styles with the CSS @media and @import at-rules, and to target specific media for the style, link, source, and other HTML elements with the media=attribute.

A media query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in various ways using logical operators.

Media types define the broad category of device for which the media query applies: all, print, screen1.

Here’s an example of using a media query to change the background color of the body element based on the width of the browser window:

body {
  background-color: tan;
}

@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

In this example, we use the @media at-rule to define a media query that applies styles based on the width of the user’s screen. If the screen is 992px wide or less, the background color of the body element will be set to blue.

Read more: Responsive Web Design - Media Queries

And now. Which one to use?

In general, media queries are useful for creating global layout changes based on the size of the user’s screen.

Container queries, on the other hand, are useful for creating more modular and reusable components that can adapt to different container sizes.

Ultimately, the choice between using container queries or media queries (or both) will depend on your specific design needs and goals.