在CSS calc（）和#x2013中实现模量行为 ；可能吗？

我想使用calc（）使元素的高度取决于屏幕大小，但由于我符合基线网格，该高度应始终是我定义的

$baseline

的倍数

我可以看到，

mod

操作符不再得到广泛支持（）

---

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

引导使用多个断点，因为它最省事

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

您可以结合媒体查询和百分比来实现所需的行为

为高度指定一个

%

，使其随屏幕调整大小，并在每个屏幕断点上指定一个

max height

属性，以替换您的mods

我个人建议使用断点。我制作了一个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优化得多，因为它减少了移动设备上所需的媒体查询

编辑

---

另一方面，如果在断点中使用$i%$breakpoint==0或类似的值，再加上高度百分比，您也可以实现相同的行为。

因为您使用的是SCS，所以您也可以用它来计算。