用行为而非屏幕尺寸思考

Chase McCoy 写了一篇关于 “间隙问题” 的精彩文章，该问题是在制作项目网格时出现的。 他的论点可以概括如下： 我们应该如何使用 CSS 中的边距来间隔元素？ 他指出，gap 属性在与 flexbox 一起使用时还没有完全准备好，如下所示

.grid {
  display: flex;
  gap: 10px;
}

目前，gap 与 flexbox 一起使用 仅在 Firefox 中受支持，我已经在几个项目中发现自己忘记了这一点。 所以要注意这一点。

无论如何，关于 Chase 博客文章中我最喜欢的一部分是他提到了 Andy Bell 的创建 无媒体查询的响应式布局 的技术，如下所示

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

此 CSS 正在执行以下操作

• 创建一个网格，每个列和行之间有 10px 的间隙。
• 每列应具有最小宽度 (150px)。
• 每列也应该具有相等的宽度 (1fr)。
• 网格应 自动填充 尽可能多的列以适合。

所有这一切的妙处在于，我们的网格现在由于 minmax 而变得有效地响应式——如果调整浏览器大小，则网格将缩减为更少的列，就像这样

根本没有媒体查询！ 虽然当然，还有其他几种方法可以使它工作，但我认为这很巧妙，不仅仅是因为我们避免了媒体查询——而是因为它教会我们在设计和构建组件时以一种新的方式思考。

Chase 继续说道

使用此技术，您无需使用断点来指定项目应堆叠的屏幕大小，而是指定元素在堆叠之前应具有的最小大小。 我喜欢这一点，因为它鼓励开发人员从行为的角度而不是屏幕尺寸的角度考虑响应式设计。

“行为而不是屏幕尺寸”是思考组件设计的绝佳方式！ 我在为设计系统制作组件时遇到的许多问题是，当我在考虑屏幕尺寸——移动设备、平板电脑、桌面等——并试图使这些组件适合这些约束时。

用行为思考总是更有效，因为除了我们正在使用的屏幕或设备宽度之外，还有很多因素会影响组件。 也许我们希望该组件适合另一个组件。 或者我们希望将一些辅助文本与之对齐以进行比较。

无论哪种方式，在拥有 容器查询 之前，用行为而不是屏幕尺寸思考实际上是不可能的，正如 Chris 所写

容器查询始终是人们要求对 CSS 进行改进的首要事项。 普遍的想法是，如果我们有容器查询，我们就不必根据页面大小编写那么多全局媒体查询。 这是因为我们实际上试图控制一个范围更小的容器，而我们现在使用媒体查询来实现这一目的，仅仅是因为它是 CSS 中最好的工具。 我绝对相信这一点。