在 CSS calc() 中实现模数行为——这可能吗？

Question

我想使用 calc() 来使元素的高度取决于屏幕大小，但由于我符合基线网格，所以这个高度应该始终是我定义的$baseline 的倍数。

我可以看到 mod 运算符不再受到广泛支持 (Using modulus in css calc function)。

是否有其他方法可以在不设置多个高度断点的情况下为我的元素实现流畅的高度？

Answer 1

bootstrap 使用多个断点，因为它最不让人头疼。

使用 calc 需要两个渲染循环，因此不建议在页面布局等核心页面样式上使用它。

您可以结合媒体查询和百分比来实现您想要的行为。

给高度指定一个%，以便它随着屏幕大小调整大小，还在每个屏幕断点上指定一个max-height 属性以替代您的模组。

我个人推荐断点。我制作了一个 flex 布局迷你库，对我来说最好的布局架构如下：

/**
 *                                           ||||||||∞ layout-lg-direction
 *                                 ||||||||||||||||||∞ layout-md-direction
 *                      |||||||||||||||||||||||||||||∞ layout-sm-direction
 *           ||||||||||||||||||||||||||||||||||||||||∞ layout-xs-direction
 * ||||||||||||||||||||||||||||||||||||||||||||||||||∞ layout-direction
 * |---------|----------|----------|---------|--------
 * 0px     480px      768px      940px     1200px    ∞px
 *
 *///direction: row, column

这与 bootstrap 正好相反，在编码时不会首先使用移动设备，但它的移动设备比 bootstrap 优化得更多，因为它减少了移动设备上所需的媒体查询。

编辑

在旁注中，您还可以在断点中使用@if $i % $breakpoint == 0 或类似的东西，结合高度百分比，您将实现相同的行为。