


What are container queries and how do they differ from media queries?
Jun 24, 2025 am 12:26 AMContainer queries allow styling elements based on their container's size, unlike media queries that rely on the viewport. 1. Media queries target the viewport and are ideal for global layout changes but lack control over individual components in different layouts. 2. Container queries target a component’s container, enabling responsive design at the component level by adjusting styles based on available space. 3. They work within layout boundaries and require defining a containment context using container-type. 4. Browser support for container queries is growing, while media queries are widely supported. 5. Both tools complement each other, with media queries handling broad layout shifts and container queries managing local responsiveness, together enhancing flexible UI design.
Container queries are a way to style elements based on the size of their container, rather than the size of the viewport like media queries. This gives developers more control when building modular components that need to adapt depending on where they appear in the layout.
What are Media Queries?
Media queries have been around for a while and let you apply styles based on things like screen width, device orientation, or resolution. Most commonly, they're used to adjust layouts for different screen sizes — think mobile vs desktop views.
For example:
@media (max-width: 600px) { .card { flex-direction: column; } }
This changes how a .card
looks when the viewport is narrow. But what if you want the same card to look different when placed inside a sidebar versus a full-width section? That’s where media queries fall short.
- They only respond to the browser window size
- Not ideal for reusable components inside different layouts
- Can’t scope styles to a specific part of the page
What Are Container Queries?
Container queries let you define styles that react to the size of a parent container. This means a component can change its appearance based on how much space it's actually given — not just the whole screen.
To use them, first, you need to define a containment context using the container-type
property:
.card-container { container-type: inline-size; }
Then you can write a query like this:
@container (max-width: 300px) { .card { font-size: 14px; } }
Now, the .card
will change styling when its container is under 300px wide — no matter where it appears on the page.
- Works within layout boundaries, not just screen size
- Great for responsive components in dynamic layouts
- Still relatively new and requires modern browser support
Key Differences Between Container Queries and Media Queries
Here's how these two tools compare:
-
Target:
- Media queries target the viewport
- Container queries target the component’s container
-
Use case:
- Media queries are for global layout changes
- Container queries are for local, component-level responsiveness
-
Control:
- With media queries, you don't always know how a component will be laid out
- Container queries give components more autonomy and flexibility
-
Browser support:
- Media queries are widely supported
- Container queries are newer and still gaining adoption (but already work in most modern browsers)
When Should You Use Each?
In practice, you’ll likely use both together. For example:
- Use media queries to switch between mobile and desktop navigation
- Use container queries so that cards or widgets inside those layouts adjust smoothly depending on available space
They solve different problems, but complement each other well in complex UIs.
Basically, container queries open up a new level of responsive design by letting components make decisions based on their immediate surroundings, not just the overall screen. It’s a small shift conceptually, but a big one in terms of flexibility.
The above is the detailed content of What are container queries and how do they differ from media queries?. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Tips for creating media queries using CSSViewport units vh and vmin With the popularity of mobile devices, responsive design has become an essential technology for modern web design. To adapt to different screen sizes, developers need to adjust layout and styles through media queries. In media queries, the most commonly used unit is pixels (px). However, CSS3 introduces a new window unit, vh and vmin, which can better adapt to different device sizes. This article will introduce how to use vh and v

Solution to css media query failure: 1. Modify the syntax such as "@media screen and (max-width:768px){...}"; 2. Add the necessary meta tags to the html header file; 3. Change the media query statement Just put it behind the original css document.

CSS media query property exploration: @media and min-device-width/max-device-width, specific code examples required Introduction: With the popularity of mobile devices, responsive design of websites has become more and more important. When implementing responsive design, CSS media query properties play a crucial role. This article will explore in depth the two media query attributes @media and min-device-width/max-device-width, and

Guide to CSS responsive layout properties: mediaqueries and min-width/max-width With the popularity of mobile devices, more and more users access websites through mobile phones and tablets. This requires the website to be able to adapt to different screen sizes and device types to provide a better user experience. CSS responsive layout is a solution that allows web content to automatically adapt to the layout and style on different devices. When implementing CSS responsive layout, we often use two important

What units to choose for responsive layout? With the popularity of mobile devices and tablets, more and more people are using various devices to browse the web. In order to ensure that web pages have good readability and user experience on different devices, responsive layout has gradually become an important consideration in design and development. When implementing responsive layout, choosing the right units is very important. This article will analyze several common units to help readers choose the appropriate units to implement responsive layout. Pixel (px): Pixel is the most common unit of length and represents a

This article takes you to learn CSS media queries (Media Quires), introduces the syntax definition of media queries in detail, learns the usage skills of media queries from three specific layout examples, and introduces some scss and css attribute knowledge.

CSS width attribute optimization tips: max-width and min-width In web design and development, setting the width of an element is a common task. In order to make web pages present good results on screens of different sizes, we often use the max-width and min-width attributes to control the width of elements. This article will introduce how to use these two attributes to optimize the design of web pages, and give some specific code examples. Use max-width to control the maximum width of an element

How to choose a suitable responsive layout type requires specific code examples. With the popularity of mobile devices and the rapid development of the Internet, responsive layout has become an important consideration in web design. Responsive layout can automatically adjust the layout and content display according to different screen sizes and device types, providing a better user experience. However, choosing the right type of responsive layout is not an easy task. This article will introduce several common responsive layout types and give corresponding code examples. I hope it can help readers better choose the one that suits their needs.
