调整CSS中的步骤调整值

实际上，CSS中有一个步骤（）函数，但仅用于动画。例如，您不能告诉一个元素，其高度可以增长，但只有10px的步骤。也许有一天？我不知道。必须有一些非常清楚的用例，例如背景重复：space ||圆形的;尚未处理。

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

 @Media（Max-Width：1500px）{Body {font-size：30px; }}}
@Media（最大宽度：1400px）{Body {font-size：28px; }}}
@Media（最大宽度：1300px）{Body {font-size：26px; }}}
@Media（最大宽度：1200px）{Body {font-size：24px; }}}
@Media（最大宽度：1000px）{body {font-size：22px; }}}
@Media（最大宽度：900px）{body {font-size：20px; }}}
@Media（Max-Width：800px）{Body {font-size：18px; }}}
@Media（最大宽度：700px）{body {font-size：16px; }}}
@Media（最大宽度：600px）{Body {font-size：14px; }}}
@Media（最大宽度：500px）{Body {font-size：12px; }}}
@Media（最大宽度：400px）{body {font-size：10px; }}}
@Media（Max-Width：300px）{Body {font-size：8px; }}}

这很奇怪，您可能想使用流体版式，但是这里的重点是在步骤中调整大小，而不仅仅是流动性。

不久前，我遇到了另一种方法来处理约翰·亨克尔（John Henkel）的Stackoverflow答案。 （我被告知明星辛普森（Simpson）也将其召集出来。）这是一个荒谬的黑客，您永远不应该使用它。但这是一个CSS技巧，所以我有义务分享它。

CANC函数使用双精度浮点。因此，它在1E18附近显示出一个步骤函数…这将捕捉到值0px，1024px，2048px，等等。

计算（6E18PX 100VW -6E18PX）;

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

您可以摆弄该计算，并将值应用于您想要的任何内容。这是我将其调低很多，然后将其应用于字体大小。

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

以上是调整CSS中的步骤调整值的详细内容。更多信息请关注PHP中文网其他相关文章！