此页面由 Cloud Translation API 翻译。

检查和调试 CSS 容器查询

Sofia Emelianova

Jecelyn Yeen

本指南介绍了如何在 Chrome 开发者工具的 Elements 面板中检查和调试 CSS 容器查询。

借助 CSS 容器查询，您可以根据元素的父容器属性操控元素的样式。此功能将自适应设计的概念从基于页面转变为基于容器。

本指南中的屏幕截图取自此演示页面。

发现容器及其后代

在元素面板中，每个定义为查询容器的元素旁边都会显示一个 container 标记。此标记会切换容器及其后代显示的虚线叠加层。

如需切换叠加层，请执行以下操作：

打开开发者工具。
在元素面板中，点击定义为容器的元素旁边的 container 标记。

在此示例中，container-type: inline-size 属性定义了容器元素。后代可以查询其内嵌维度（横轴），并根据容器的宽度更改其样式。

检查容器查询

元素面板会在将 @container 查询声明应用于后代元素时（即容器满足查询条件时）显示这些声明。

如需了解何时可以检查此演示页面上的 @container 声明，请查看以下代码示例：

@container (inline-size > 400px) {
  .coffee p {
    display: block;
  }
}

@container (inline-size > 600px) {
  .coffee {
    display: grid;
    grid-template-columns: 280px auto;
  }

  .coffee h1 {
    grid-column: 1/3;
  }

  .coffee img {
    grid-row: 2/4;
  }