Div サイズに基づいてフォント サイズを動的に変更するにはどうすればよいですか?

Div サイズに応じてフォント サイズを変更します

div が 9 つのボックスで構成され、中央のボックス内にテキストが含まれるシナリオの場合、ページ全体の寸法と一貫した比率を維持するには、フォント サイズを動的に調整することが望ましいです。

Div 内のテキストのサイズ変更

これを実現するには、 内の次の CSS3 プロパティタグ:

body {
  font-size: calc(1.25vmin + 1.25vmax);
}

解像度間の互換性

異なる解像度に対応するために複数の CSS メディア クエリを利用する代わりに、フォントを自動的に調整する次の CSS3 スタイルの使用を検討してください。画面の幅に基づくサイズ:

@media (min-width: 50px) { body { font-size: 0.1em; } }
@media (min-width: 100px) { body { font-size: 0.2em; } }
// ...and so on, with incrementing width thresholds...
@media (min-width: 1700px) { body { font-size: 3.6em; } }

説明

• vmin 単位は、ビューポートの高さまたは幅の最小パーセンテージを表します。
• vmax 単位は、ビューポートの高さまたは幅の最大パーセンテージを表します。
• この式を使用すると、フォント サイズはビューポートの高さと幅の小さい方に比例して拡大縮小され、テキストの比率が一貫したものになります。画面サイズが異なります。

以上がDiv サイズに基づいてフォント サイズを動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。