媒体查询与容器查询 – 你应该何时使用哪种？_AI阅读总结 — 包阅AI

with class of mysite to be given a background-color of red if the viewport reaches a maximum width of 480px.

Tip: Max-width is used to assume a desktop-first design and targeting smaller as we go down. If it were a mobile-first design, we’d use min-width to target bigger screens as we go up.

What Are Container Queries?

Container queries are rules for applying specified styles to an element based on the size of that element’s parent container. They’re an answer to a long-standing question by web developers who wanted the ability to respond to changes within an individual container on the page rather than the whole viewport.

.header {   container: mysite / inline-size;}@container mysite (min-width: 600px) {   .maincard {       grid-template-column: 1fr 1fr;    }   .item {       background-color: green;    }}

As you can see in the code above, we first define a container whose children we want to make changes to. In our case, we’d like to make changes to the element with class of item, within the header container. You can do this by giving the container a name (optional) and type.

Next, using the @container rule, we check for condition(s) and apply some styles if met. For a minimum width of 600px, we want green as the background-color and two grid columns.

Tip: You don’t define a container to make changes directly to that container – but to it’s children. This means that if we wanted to make changes to the header container itself, we would have to nest it within another container: for instance container A and query A to affect it’s child – header.

Now, with an understanding of how both work, let’s see them in real-life. The CodePen below shows four elements in a layout. The first two are styled with container queries while the bottom two are styled with media queries. You can resize the viewport to see how the elements respond.

Media and container queries CodePen demo: project inspired by Miriam Suzanne.

See the Pen MQ vs CQ (from MS) by Ophy Boamah (@ophyboamah) on CodePen.

Summary of main differences, explained in detail below

Viewport-based vs. Container-based

Media queries apply styles based on the size of the viewport (the entire browser window). This means that the layout changes according to the overall screen size, making it suitable for adjusting designs for different devices like mobile phones, tablets, and desktops.

Container queries, on the other hand, apply styles based on the size of the container element in which they are placed. This allows individual components to adapt their appearance based on their own size rather than the viewport size, making them highly flexible and reusable across different parts of a web page.

Modularity and Flexibility

Since media queries depend on the viewport size, they can be less effective for creating truly modular components. Adjusting styles for one part of a page may unintentionally affect others, especially in complex layouts. Plus, they may fall short in scenarios where components need to adapt independently within a larger layout. This can lead to less maintainable CSS.

In contrast, container queries promote modularity and flexibility by allowing styles to be defined based on the container’s size. This means you can create components that are self-contained, adaptable, and that can be reused in various parts of a website without unexpected changes, enhancing their reusability.

This results in more adaptive designs where components can adjust their own layout and appearance, which is useful in modern, component-based design systems.

Complexity and Maintenance

In large projects, managing numerous media queries can become cumbersome. As the number of breakpoints and special cases grows, the CSS can become complex and harder to maintain. Over time, this can lead to a bloated and difficult-to-manage codebase.

Container queries can simplify the maintenance of CSS in large projects. By keeping styles component-specific and context-aware, the CSS remains more organized and modular. This reduces the complexity of managing global breakpoints and makes it easier to maintain, leading to a more organized codebase.

Which Should You Use and When?

Media query vs container query (image credit: web.dev)

Everything we discussed in the previous sections is meant to help you make an informed decision. Having seen how these two concepts compare and contrast, now consider the following factors:

Understanding and Comfort

How well do you understand each concept? Container queries are relatively new but if you spend time studying and experimenting with them, just like media queries, the learning curve isn’t intimidating. So use in production the one you understand and are more comfortable with, to make your life easier.

Project Requirements and Complexity

What’s the design approach you’re using and how complex is your project? Because sometimes the design approach for your project will determine which of these will best suit your needs. Also, the more complex, the harder it’ll get to maintain your code and you want to use something you can manage.

Future Trends and Collaboration

The future of responsive design is looking more and more intrinsic. We’re gradually making a shift towards component responsiveness based on changes to their individual content, and container queries shine best here.

But media queries don’t seem to be going anywhere anytime soon, so you can use them together to achieve perfect responsiveness across many different devices.

Conclusion

The potential for container queries to allow creating reusable components in CSS is exciting – but it may not be ready to fully replace media queries for making web pages responsive just yet.

For now, our best bet is using them together, and where each makes the most sense. And you can be sure to make the right call by experimenting further to internalize the pros and cons of each.

Here are some helpful resources: