在行为上思考，而不是屏幕大小

Chase McCoy撰写了一篇关于创建项目网格时“间隙问题”的精彩文章。他的论点可以概括如下：我们应该如何使用CSS中的边距来设置元素间距？他指出，当与flexbox一起使用时，gap属性还不够完善，例如：

.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中拥有的最佳工具。我完全相信这一点。

以上是在行为上思考，而不是屏幕大小的详细内容。更多信息请关注PHP中文网其他相关文章！