【技术直击】助你让产品自适应布局的妙招——CSS 容器查询

CSS 容器查询：让你轻松打造适应不同屏幕尺寸的布局

在构建网站时，我们希望它能够适应不同的设备屏幕尺寸，以提供最佳用户体验。传统上，我们使用媒体查询来实现响应式布局。然而，媒体查询存在一些局限性，例如，它无法根据容器的尺寸来调整布局。CSS 容器查询的出现解决了这一问题，它允许我们根据容器的尺寸来定义样式，从而创建更灵活的布局。

CSS 容器查询的基础知识

CSS 容器查询是一种 CSS 媒体查询，它允许我们根据容器的尺寸来定义样式。容器查询使用容器选择器来指定要应用样式的容器。容器选择器是一个 CSS 选择器，它可以是任何有效的 CSS 选择器，例如，类选择器、ID 选择器或元素选择器。

CSS 容器查询的优点

• 灵活性： CSS 容器查询允许我们根据容器的尺寸来定义样式，从而创建更灵活的布局。
• 可维护性： CSS 容器查询使我们的代码更易于维护，因为我们可以在一个地方定义所有与容器相关的样式。
• 性能： CSS 容器查询可以提高页面的性能，因为浏览器只需要计算一次容器的尺寸，然后就可以应用相应的样式。

CSS 容器查询的使用方法

为了使用 CSS 容器查询，我们需要在我们的 CSS 代码中使用 @container 规则。@container 规则的语法如下：

@container <container-name> {
  <styles>
}

其中， 是容器的选择器， 是要应用到容器的样式。

CSS 容器查询的实例

下面是一个使用 CSS 容器查询创建响应式布局的示例：

@container main {
  width: 100%;
  max-width: 960px;
  padding: 20px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  @container main {
    max-width: 100%;
  }
}

在这个示例中，我们使用 @container main 规则来定义 main 容器的样式。我们指定 main 容器的宽度为 100%，最大宽度为 960px，并设置了边距和内边距。当屏幕宽度小于或等于 600px 时，@media 规则会被激活，此时，我们使用 @container main 规则来设置 main 容器的最大宽度为 100%，从而使 main 容器能够适应较小的屏幕尺寸。

CSS 容器查询的兼容性

CSS 容器查询目前还没有得到所有浏览器的支持。然而，我们可以使用 polyfill 来支持较旧的浏览器。

CSS 容器查询的资源

• CSS 容器查询
• 使用 CSS 容器查询创建响应式布局
• CSS 容器查询 polyfill