带有容器查询的'智能”布局

现代CSS继续为长期设计挑战提供创新的简化解决方案。 但是，这些进步通常会引入新的可能性，而不仅仅是解决问题。容器查询示例性，为布局设计提供了令人兴奋的新途径。 但是，它们与媒体查询的相似性可能导致其独特功能的实现不足。

>媒体查询在响应式Web设计中发挥了作用，但它们具有固有的局限性。 他们缺乏上下文意识，主要依赖于视口尺寸和浏览器的初始字体大小（不是CSS中定义的根字体大小）。

考虑此示例：

>直觉上，人们可能会假设背景颜色在1120px（35REM

html {
  font-size: 32px;
}

body {
  background: lightsalmon;
}

@media (min-width: 35rem) {
  body {
    background: lightseagreen;
  }
}

32px）的视口宽度上发生变化。 这是不正确的。媒体查询仅考虑浏览器的初始*字体大小（通常为16px，但可调整用户调整），如媒体查询规范中指定：相对长度单元基于初始值，独立于声明的值。

。 此设计选择可防止以下方案中的无限循环 相比之下，容器查询提供了卓越的智能。 他们直接评估了容器的大小，消除了断点中“魔术数字”的需求。

> 例如，要创建一个更大尺寸的三列网格，介质查询需要精确的断点计算。使用容器查询，我们定义最小列宽度，并相应地进行布局调整。 如果我们想要三个300px列，我们知道一个900px容器就足够了。 由于视口内的容器大小的可变性，这与媒体查询无济于事。 此外，容器查询支持任何单元，包括

（字符宽度），允许基于文本内容进行布局。

html {
  font-size: 16px;
}

@media (min-width: 30rem) {
  html {
    font-size: 32px;
  }
}

>示例：

通过在容器查询中使用ch（如Miriam Suzanne的建议）进一步增强了这种方法：

。

实用的注意事项和解决方案：

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

.grid {
  display: grid;
  gap: 1rem;

  @container (width > 90ch) {
    grid-template-columns: repeat(3, 1fr);
  }
}

>

>容器查询需要定义的容器元素。 这需要包装元素，这可能很麻烦，尤其是在网格或弹性物品的情况下。 但是，使用calc()允许主网格充当容器：> @container (width > calc(30ch * 3))

这可以根据列数启用样式：

>断点的自定义属性可以增强开发人员的体验，但当前功能具有显着优势。

repeat(auto-fit, ...) flexbox考虑：

>容器查询可以应用于Flexbox，但是Flexbox算法未考虑Flex项目上的填充和边界，这可能导致意外的布局变化。 因此，对于这种响应式布局，通常首选网格。

> 总而言之，集装箱查询为响应式设计提供了一种更聪明，更灵活的方法，超越了媒体查询的局限性并解锁了新的创意可能性。

以上是带有容器查询的'智能”布局的详细内容。更多信息请关注PHP中文网其他相关文章！