CSS 容器查询单元

几天前，我看到Miriam Suzanne 的一条推文，关于支持 CSS 查询单元。这最初是由Una Kravets在 Github 上提出的。我忍不住尝试了它们，看看我们如何从 CSS 容器查询中获得更多好处。

我将尽力解释每个单元的工作原理，以及我们可以在哪里使用单元来增强组件对其父宽度的反应。如果您还不了解 CSS 容器查询，我写了一篇介绍，其中包含大量示例以及容器查询如何影响设计人员的工作。我建议在阅读本文之前先阅读它们。

温馨提醒：CS​​S 容器查询仅在带有实验标志的 Chrome Canary 中受支持。要使用它，请转到chrome://flags并搜索“启用 CSS 容器查询”并启用该功能。

让我们潜入。

介绍

在 CSS 中，我们有很多可以用于不同目的的单位。最常用的有px，rem和em。如果与 CSS 容器查询单元的工作方式接近，那么我会说视口单元。

CSS 视口单位以响应浏览器视口大小（宽度或/和高度）的方式工作。这很好，但我们并不总是想使用与视口大小相关的单位。如果我们想查询容器宽度怎么办？这就是查询单元的用途。

为了更清楚，我想强调视口单位和查询单位之间的区别。考虑下图：

在左侧，font-size由rem和控制vw，这将相对于视口宽度。在某些情况下，这可能有效，但可能会导致意外问题，因为它与视口大小有关。

查询单位可以用之类的东西打交道时，我们节省精力和时间font-size，padding以及margin一个组件中。我们可以使用查询单位代替手动增加字体大小。

考虑以下示例。

我们有一个卡片组件，它以堆叠样式开始，当容器很大时一直到类似英雄的样式。对于这样的组件，我们可能需要更改以下内容：

• 缩略图大小
• 字体大小
• 元素之间的间距

如果没有 CSS 查询单元，我们需要手动更改上述内容。

.card {/* The stacked, base style */
}.card__title {font-size: 1rem;
}/* The horizontal style, v1 */
@container (min-width: 400px

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！