CSSでMax-Font-Sizeをどのように行いますか？

CSSにはMax-Font-Sizeがないため、それらのラインに沿って何かを行うことが必要な場合は、トリッキーになる必要があります。

なぜあなたはそれをまったく必要とするのですか？まあ、フォントサイズ自体は動的な方法で設定できます。たとえば、font-size：10vw;。これは、「ビューポートユニット」を使用してタイプをサイズします。これにより、ブラウザウィンドウのサイズが大きくなります。 Max-Font-Sizeがあれば、それがどれだけ大きくなるかを制限することができます（同様に、Min-Font-Sizeで他の方向）。

解決策の1つは、フォントサイズを非関連ユニットに設定する特定の画面サイズのブレークポイントでメディアクエリを使用することです。

体 {
  フォントサイズ：3VW;
}
@media画面と（min-width：1600px）{
  体 {
     フォントサイズ：30px;
  }
}

ここではよりファンシーになるCSSロックと呼ばれるコンセプトがあり、最小値と最大値の間で値をゆっくりとスケーリングします。私たちはそれをカバーしました。それは…

体 {
  フォントサイズ：16px;
}
@media画面と（min-width：320px）{
  体 {
    font -size：calc（16px 6 *（（100vw -320px） / 680））;
  }
}
@mediaスクリーンと（min-width：1000px）{
  体 {
    フォントサイズ：22px;
  }
}

また、それがどのように到達したか（または得られる）ことをカバーしました。

CSSにはmax（）関数があるため、上記の例は1ライナーになります。

フォントサイズ：最大（30VW、30px）;

または、それを1分と最大で2倍にします：

 font-size：min（max（16px、4vw）、22px）;

これは同じです：

フォントサイズ：クランプ（16px、4vw、22px）;

これらの関数のブラウザの互換性は、私がこれを書いているのでかなりまばらですが、Chromeには現在それがあります。そこに到達しますが、今すぐ必要に応じてこの記事の最初のオプションを見てください。

これらの関数があるので、機能はほぼ明確であるため、CSSで最小サイズと最大サイズのサイズを手に入れる可能性は低いようです。

以上がCSSでMax-Font-Sizeをどのように行いますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。