什么是容器查询？分享 1 段优质 CSS 代码片段！

本内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！

大家好，我是大澈！

本文约 700+ 字，整篇阅读约需 1 分钟。

今天分享一段优质 CSS 代码片段，使用容器查询来实现响应式布局。

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！

@container (min-width: 500px) {
 .my-element {
    background-color: blue;
  }
}

@container (max-width: 300px) {
 .my-element {
    font-size: 12px;
  }
}

分享原因

这段代码展示了 CSS 中的容器查询特性，它能够根据容器的不同宽度条件，为元素应用不同的样式。

在项目中，可以把容器查询和媒体查询结合起来，实现更加灵活和响应式的布局设计。

代码解析

1. 什么是容器查询 ？

容器查询是 CSS 中的一种相对较新的特性，它允许根据元素的容器（父元素或包含元素）的尺寸和特性来应用不同的样式。

与媒体查询根据视口（如屏幕尺寸、设备类型等）的特性来应用样式不同，容器查询是基于元素所在的直接容器的条件来改变样式。

例如，如果一个元素被包含在一个具有特定宽度的容器中，您可以使用容器查询为该元素应用特定的样式规则，而无需依赖于整个视口的尺寸。

这使得样式的应用更加灵活和有针对性，可以为组件化的设计提供更精细的控制。例如，一个侧边栏组件在不同宽度的父容器中可以有不同的布局和样式。

2. @container ( xxx )

使用 @container 规则，.my-element 元素的样式会根据其容器的宽度条件而变化。

假设 .my-element 被包含在一个宽度大于等于 500 像素的容器中，它的背景色将变为蓝色。

如果它所在的容器宽度小于等于 300 像素，它的字体大小将变为 12 像素。

3. 兼容性

容器查询在各个浏览器的支持情况如下：