CSS 中分步调整大小的值

CSS 中确实存在一个 steps() 函数，但它 仅用于 animation。 例如，您无法告诉某个元素允许其高度增加，但只能以 10px 为步长增加。 也许有一天？我不知道。必须有一些非常明确的用例，例如 background-repeat: space || round; 无法 处理。

处理步长的另一种方法是使用顺序媒体查询。

@media (max-width: 1500px) { body { font-size: 30px; }}
@media (max-width: 1400px) { body { font-size: 28px; }}
@media (max-width: 1300px) { body { font-size: 26px; }}
@media (max-width: 1200px) { body { font-size: 24px; }}
@media (max-width: 1000px) { body { font-size: 22px; }}
@media (max-width: 900px) { body { font-size: 20px; }}
@media (max-width: 800px) { body { font-size: 18px; }}
@media (max-width: 700px) { body { font-size: 16px; }}
@media (max-width: 600px) { body { font-size: 14px; }}
@media (max-width: 500px) { body { font-size: 12px; }}
@media (max-width: 400px) { body { font-size: 10px; }}
@media (max-width: 300px) { body { font-size: 8px; }}

这很奇怪，您可能希望使用 流体排版， 但这里的重点是分步调整大小，而不仅仅是流畅性。

我偶然发现 另一种 在一段时间前 John Henkel 的 StackOverflow 答案中处理步骤的方法。（我被告知 Star Simpson 也 指出了这一点。）这是一个荒谬的技巧，您不应该使用它。 但这是一个 CSS 技巧，所以我必须按合同义务分享它。

calc 函数使用双精度浮点数。 因此，它在 1e18 附近表现出阶跃函数……这将捕捉到 0px、1024px、2048px 等值。

calc(6e18px + 100vw - 6e18px);

这非常古怪。 这是一个奇怪的“实现细节”，尚未指定，因此您只会看到它出现在 Chrome 和 Safari 中。

您可以调整该计算并将该值应用于您想要的任何内容。 这里我将它调低了很多，并将其应用于 font-size。

尝试调整大小以查看步进行为（在 Chrome 或 Safari 中）。