CSSのステップで値を変更します

実際にはCSSにはステップ（）関数がありますが、アニメーションにのみ使用されます。たとえば、高さで成長することを許可されている要素には、10pxの階段でのみ要素を伝えることはできません。多分いつか？私は知らないよ。バックグラウンドリピートのようなもの：スペース||ラウンド;まだ処理していません。

ステップを処理する別の方法は、シーケンシャルメディアクエリです。

 @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; }}

それはただ奇妙であり、おそらく流動的なタイポグラフィを使用したいと思うでしょうが、ここでのポイントは、流動性だけでなく、ステップでサイズを変更することです。

少し前にジョン・ヘンケルからのスタックフローの答えでステップを処理する別の方法に出会いました。 （私はスターシンプソンもそれを呼び出しました。）それはばかげたハックであり、あなたはそれを使用してはいけません。しかし、それはCSSのトリックなので、私は契約上共有する義務があります。

カルツ関数は、二重精度フロートを使用します。したがって、1e18の近くにステップ関数を示します。これは、値0px、1024px、2048pxなどにスナップします。

 calc（6e18px 100VW -6e18px）;

それはかなり奇抜です。それは仕様されていない奇妙な「実装の詳細」であるため、ChromeとSafariでのみ表示されます。

その計算をいじり、必要なものに値を適用できます。これをかなり調整して、代わりにフォントサイズに適用しています。

それを変更して、ステッピング動作を確認してみてください（ChromeまたはSafari）。

以上がCSSのステップで値を変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。