調整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中文網其他相關文章！