JS `container queries` (CSS)：响应式设计中基于容器尺寸的样式

各位观众，大家好！我是你们的老朋友——代码界的段子手，今天咱们来聊聊 CSS 中的“容器查询（Container Queries）”这个让人兴奋又有点懵圈的东西。别怕，我会用最接地气的方式，带你彻底搞懂它，保证你听完能笑着写代码！

一、啥是容器查询？为啥我们需要它？

先说说背景，我们以前做响应式设计，主要靠的是“媒体查询（Media Queries）”。简单来说，媒体查询就是根据屏幕的尺寸（宽度、高度等）来应用不同的 CSS 样式。这招在大部分情况下都挺好使，但它有个致命的缺点：它只能感知屏幕的大小，而不知道自己所在的容器有多大！

举个栗子：

你有一个组件，需要在不同的屏幕尺寸下显示不同的布局。用媒体查询当然可以实现，但如果这个组件在同一个屏幕上，分别放在一个窄的侧边栏和一个宽的主内容区域里呢？媒体查询就抓瞎了，因为它只知道屏幕尺寸，不知道组件容器的尺寸。

这时候，容器查询就闪亮登场了！容器查询允许我们根据组件 自身所在的容器 的尺寸来应用不同的 CSS 样式。 也就是说，组件可以根据自己所处的环境来调整样式，而不再是只看屏幕的脸色行事。

二、容器查询的基本语法：像写段子一样简单

容器查询的语法其实很简单，核心就两步：

声明一个容器： 告诉浏览器哪个元素是容器，我们要基于这个容器的尺寸来应用样式。
编写查询规则： 类似于媒体查询，但查询的是容器的尺寸，而不是屏幕的尺寸。

1. 声明容器 container-type 和 container-name

首先，我们需要指定一个元素作为容器。这要用到 container-type 属性。它可以取两个值：

size: 这个是最常用的，表示容器的尺寸（宽度、高度、内联大小、块大小）会影响查询结果。
inline-size: 只有容器的内联大小（通常是宽度）会影响查询结果。

除了 container-type，我们还可以使用 container-name 给容器起个名字，方便在查询的时候引用。

/* 声明一个名为 "card" 的容器，类型为 size */
.card-container {
  container-type: size;
  container-name: card;
}

/* 声明一个容器，只关心宽度 */
.sidebar {
  container-type: inline-size;
}

2. 编写查询规则 @container

有了容器，就可以编写查询规则了。查询规则使用 @container 关键字，后面跟着查询条件和样式块。

/* 查询名为 "card" 的容器，当宽度大于 500px 时应用样式 */
@container card (min-width: 500px) {
  .card {
    flex-direction: row; /* 横向排列 */
  }
}

/* 查询宽度大于 300px 的容器，应用样式 */
@container (min-width: 300px) {
  .text {
    font-size: 1.2rem;
  }
}

三、容器查询的实战演练：从入门到精通

光说不练假把式，咱们来几个实际的例子，让你彻底掌握容器查询的用法。

1. 卡片组件的自适应布局

假设我们有一个卡片组件，需要在不同的容器宽度下显示不同的布局。

<div class="card-container">
  <div class="card">
    <img src="image.jpg" alt="Card Image">
    <div class="card-content">
      <h2>Card Title</h2>
      <p>Card Description</p>
    </div>
  </div>
</div>

.card-container {
  container-type: inline-size; /* 容器类型为 inline-size */
  border: 1px solid #ccc;
  padding: 10px;
}

.card {
  display: flex;
  flex-direction: column; /* 默认纵向排列 */
  align-items: center;
}

.card img {
  width: 100%;
  max-width: 200px;
}

/* 当容器宽度大于 400px 时，横向排列 */
@container (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: flex-start;
  }

  .card img {
    width: 150px; /* 图片宽度固定 */
    margin-right: 10px;
  }
}

在这个例子中，当 .card-container 的宽度小于 400px 时，卡片的内容会纵向排列；当宽度大于 400px 时，内容会横向排列。

2. 侧边栏组件的样式调整

假设我们有一个侧边栏组件，需要在不同的容器宽度下调整字体大小和间距。

<div class="sidebar">
  <h3>Sidebar Title</h3>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

.sidebar {
  container-type: inline-size; /* 容器类型为 inline-size */
  border: 1px solid #ccc;
  padding: 10px;
}

.sidebar h3 {
  font-size: 1.2rem;
  margin-bottom: 5px;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  margin-bottom: 3px;
}

/* 当容器宽度大于 200px 时，增大字体和间距 */
@container (min-width: 200px) {
  .sidebar h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
  }

  .sidebar li {
    margin-bottom: 5px;
  }
}

在这个例子中，当 .sidebar 的宽度小于 200px 时，字体大小和间距会比较小；当宽度大于 200px 时，字体大小和间距会增大。

3. 使用 container-name 进行更精确的控制

假设我们有两个不同的容器，都包含一个标题元素，但我们只想对特定容器中的标题应用样式。

<div class="container-one">
  <h3>Title in Container One</h3>
</div>

<div class="container-two">
  <h3>Title in Container Two</h3>
</div>

.container-one {
  container-type: inline-size;
  container-name: one; /* 给容器起个名字 */
}

.container-two {
  container-type: inline-size;
  container-name: two; /* 给容器起个名字 */
}

/* 只对名为 "one" 的容器中的标题应用样式 */
@container one (min-width: 300px) {
  h3 {
    color: blue;
  }
}

在这个例子中，只有 .container-one 中的 h3 元素在容器宽度大于 300px 时会变成蓝色。

四、容器查询的进阶技巧：让你的代码更优雅

掌握了基本语法，我们再来看看一些高级技巧，让你的容器查询代码更上一层楼。

1. 使用逻辑运算符：and、or

和媒体查询一样，容器查询也支持使用逻辑运算符来组合多个查询条件。

/* 当容器宽度大于 300px 且高度大于 200px 时应用样式 */
@container (min-width: 300px) and (min-height: 200px) {
  .element {
    background-color: lightgreen;
  }
}

/* 当容器宽度大于 500px 或高度大于 400px 时应用样式 */
@container (min-width: 500px) or (min-height: 400px) {
  .element {
    border: 1px solid red;
  }
}

2. 使用范围查询：width < 500px

除了使用 min-width 和 max-width，我们还可以使用更简洁的范围查询语法。

/* 当容器宽度小于 500px 时应用样式 */
@container (width < 500px) {
  .element {
    font-size: 0.8rem;
  }
}

/* 当容器宽度在 300px 到 700px 之间时应用样式 */
@container (300px < width < 700px) {
  .element {
    padding: 10px;
  }
}

3. 使用自定义属性（CSS variables）

我们可以使用 CSS 自定义属性来定义容器尺寸的阈值，让代码更易于维护。

:root {
  --breakpoint-small: 400px;
  --breakpoint-medium: 700px;
}

.container {
  container-type: inline-size;
}

@container (min-width: var(--breakpoint-small)) {
  .element {
    /* 应用于小屏幕的样式 */
  }
}

@container (min-width: var(--breakpoint-medium)) {
  .element {
    /* 应用于中等屏幕的样式 */
  }
}

五、容器查询的注意事项：避开那些坑

容器查询虽然强大，但也有些需要注意的地方，避免踩坑。

性能问题： 过多的容器查询可能会影响页面性能，特别是当容器嵌套很深的时候。尽量避免在复杂的布局中使用过多的容器查询。
循环依赖： 避免出现容器查询的循环依赖，比如容器的尺寸依赖于自身的样式，这会导致无限循环。
浏览器兼容性： 截至目前（2024年），容器查询的浏览器兼容性还不错，主流浏览器都支持。但还是建议在使用前检查一下兼容性，并提供备选方案。可以查看 caniuse.com 上的容器查询兼容性信息。

六、容器查询 vs 媒体查询：谁更胜一筹？

既然有了容器查询，那我们是不是就可以抛弃媒体查询了呢？当然不是！它们各有各的用途，不能互相替代。

特性	媒体查询 (Media Queries)	容器查询 (Container Queries)
适用场景	基于屏幕尺寸的全局布局	基于容器尺寸的组件级别布局
查询对象	视口（viewport）	容器元素
灵活性	较低	较高
适用范围	全局样式，整体布局	组件内部样式，局部调整

简单来说，媒体查询适合做全局性的布局调整，比如改变页面的整体结构；而容器查询适合做组件级别的样式调整，比如改变卡片组件的布局。

七、容器查询的未来：无限可能

容器查询的出现，为响应式设计带来了新的可能性。它可以让我们的组件更加灵活、可复用，也让我们的代码更加简洁、易于维护。

未来，容器查询可能会有更多的扩展，比如支持更多的查询条件（比如容器的宽高比），支持更复杂的布局方式。相信随着容器查询的不断发展，我们的 Web 开发也会变得更加高效、有趣。

总结：

好了，今天的容器查询讲座就到这里。希望通过今天的讲解，你已经彻底搞懂了容器查询的原理和用法。记住，容器查询不是万能的，但它绝对是响应式设计工具箱里的一把利器。

记住，代码的世界没有绝对的对错，只有不断的学习和尝试。希望大家都能在代码的海洋里找到属于自己的乐趣！下次再见！

发表回复 取消回复

发表回复取消回复