CSS容器ð�查询响应和可重复使用的组件的查询
#css #网络开发人员 #教程 #containers

表中的内容

  1. Introduction
  2. Using a container query
  3. Why should I use a container query?
  4. Creating a reusable component with container query
  5. Using the container query responsive unit
  6. Conclusion
  7. Resources

介绍

在CSS3中，我们看到了媒体查询的使用。
响应式和流体设计的兴起带来了Flexbox，网格系统，然后带来了媒体查询。

媒体查询是一个CSS设有规则，它使元素的样式取决于视口的大小。它在开发响应式界面方面非常方便。

@media only screen and (max-width: 440px) {
  .main {
    flex-direction: column;
  }
}

a 容器查询也是CSS AT-LULE，但取决于父元素的大小。元素的样式取决于其父容器的大小而不是视口。

使用容器查询

最近在所有主要浏览器中，集装箱查询变得稳定。因此，它可以在您的代码中实现。
Visit caniuse to see supported browsers.

对于不支持的浏览器，CSS Flex和Grid可以用作后备，以获得与容器查询相似的效果。

@container card (max-width: 853px) {
  .card {
    flex-direction: column;
    width: 80%;
    margin-bottom: 10px;
  }
  .card-header {
    width: 100%;
  }
  .card-body p {
    font-size: clamp(8px, 5cqi, 18px);
  }
}

集装箱查询带有一些属性。

  • 容器类型：在容器元素上使用它来确定将是哪种类型的容器。它接受以下任何值。
    1. 正常：该元素不是任何容器尺寸的查询容器。但是，它仍然有效，因为它可以用于将样式应用于元素
    2. 内联大小：查询将基于容器的内联尺寸。将布局，样式和内联尺寸遏制应用于元素
    3. 大小：查询将基于容器的内联和块尺寸。将布局，样式和尺寸遏制应用于容器。 
.card-container {
  container-type: size | inline-size | normal;
}
  • 容器名称：它用于命名遏制上下文。然后可以在@Container查询中使用该名称来定位特定容器。 
.card-container {
  container-name: cardContainer;
}
  • 容器查询还提供了一些相对单元，这些单元可在围栏上下文中使用，以样式包含元素。 他们包括： CQI：容器内联尺寸的1％ CQB：容器大小的1％ CQH：容器高度的1％ CQW：容器宽度的1％ CQMAX：CQI和CQB之间最大 CQMIN：CQI和CQB之间的最小

这些相对单元就像视口的相对单位一样。

为什么要使用容器查询？

  • 使用自己的样式创建可重复使用的组件
  • 样式元素根据其大小而不是浏览器视口
  • 创建流体版式
  • 使用集装箱查询中提供的新响应单元

使用容器查询创建可重复使用的组件

可以使用容器查询重复使用元素。一个元素可以在两个不同的容器中使用，并样式响应这些容器的大小。

card component used in different containers

在上图中，卡组件可重复使用。在侧边栏中，它在主要内容中垂直堆叠，水平堆叠。它正在响应其容器的大小。

以下是在上图中产生接口的代码样本。

<!-- card container sidebar component -->
    <div class="aside card-container">

      <!-- card1  -->
      <div class="card">
        <div class="card-header"></div>
        <div class="card-body">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas,
            hic!
          </p>
          <button>Click</button>
        </div>
      </div>

      <!-- card2 -->
      <div class="card">
        <div class="card-header"></div>
        <div class="card-body">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas,
            hic!
          </p>
          <button>Click</button>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="header">
        Cool resorts
      </div>

      <!-- card container component -->
      <div class="main card-container">

        <!-- card1 -->
        <div class="card">
          <div class="card-header"></div>
          <div class="card-body">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas,
              hic!
            </p>
            <button>Click</button>
          </div>
        </div>

        <!-- card2 -->
        <div class="card">
          <div class="card-header"></div>
          <div class="card-body">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas,
              hic!
            </p>
            <button>Click</button>
          </div>
        </div>

        <!-- card3 -->
        <div class="card">
          <div class="card-header"></div>
          <div class="card-body">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas,
              hic!
            </p>
            <button>Click</button>
          </div>
        </div>

      </div>

    </div>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --size: 2;
}

body {
  display: grid;
  grid-template-columns: 20% auto;
  grid-template-rows: 100vh;
}

.container {
  width: 100%;
}

.aside {
  border-right: 2px solid grey;
  height: 100%;
  padding: 10px;
}

.header {
  text-align: center;
}

.main {
  display: flex;
  gap: 20px;
  width: 100%;
  padding: 20px;
}

.card-container {
  container-type: size;
  container-name: cardContainer;
}

.card {
  width: calc(100% / var(--size));
  font-size: 16px;
  padding: 5px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  height: fit-content;
  border: 2px solid black;
}

.card-header {
  width: calc(100% / var(--size));
  height: 90px;
  background-color: black;
}

.card-body button {
  margin-top: 10px;
  border-radius: 5px;
  border: none;
  padding: 5px 10px;
  background-color: black;
  color: white;
}

@container cardContainer (max-width: 853px) {
  .card {
    flex-direction: column;
    width: 80%;
    margin-bottom: 10px;
  }
  .card-header {
    width: 100%;
  }
  .card-body p {
    font-size: clamp(8px, 5cqi, 18px);
  }
}

@media only screen and (max-width: 440px) {
  .main {
    flex-direction: column;
  }
}

创建了一个coartment上下文 “ container-name：cardContainer” ，并且容器类型定义为 “ container-type：size：size” < /em> 。
@Container设置为容器的最大宽度为853px时。当宽度落在此范围内时，@Container Atrule中的样式生效。

卡元素对容器的大小（卡片容器）而不是视口响应。

如果容器的宽度小于或等于853px，则卡元件的挠性方向变为一列，宽度增加，宽度元件的大小也会增加宽度。

在旁边和主要元素中使用了相同的卡元素，但由于侧栏的大小与主元素的大小不同，因此其样式为不同。

使用容器查询响应单元

在@Container At子中，响​​应单元 cqi 在卡体段落的字体尺寸上使用。 夹具函数用于夹紧8px和18px之间的任何设备。请注意， clamp（）函数不是容器查询功能。
如果容器的内联尺寸增长，则段落的字体大小会增加，因为它始终是容器内联尺寸的5％。但是它永远不会超过18px。另外，如果容器的内联尺寸收缩，则段落的字体大小减小，但不少于8px。

结论

容器查询是最近用于查询媒体查询等元素的CSS设有规则。但是，容器查询取决于元素的大小，而不是浏览器视口。它最近在主要浏览器（Chrome/Edge 106，Safari 16和Firefox 110）中稳定。

它使元素具有独立样式的更多可能性，具体取决于其尺寸。

资源