Web 開発でコンテナのサイズに基づいてフォント サイズを動的に調整するにはどうすればよいですか?

コンテナ サイズに基づいてフォント サイズを動的に決定する

Web 開発では、テキスト要素のフォント サイズをコンテナ サイズに基づいて指定することが望ましいことがよくあります。ビューポートの幅や高さに関係なく、それに含まれる要素のサイズ。これは CSS を通じて実現できますが、適切なフォント サイズ単位を慎重に検討する必要があります。

フォント サイズのパーセンテージ スケーリング

次のように、パーセンテージを使用してフォント サイズを設定します。 font-size: 50% は、継承されたフォント サイズを基準にしてフォントを拡大縮小するだけですが、動的なサイズ変更には望ましくありません。 vw (ビューポート幅) ユニットを使用すると、この問題に対処できます:

#mydiv {
  font-size: 5vw;
}

この例では、フォント サイズはビューポート幅の 5% となり、コンテナ サイズに関係なく一貫したテキスト サイズが確保されます。

ユーザーユニットを含む埋め込み SVG

別のアプローチは、SVG を利用することです(スケーラブル ベクター グラフィックス) HTML に埋め込まれます。 SVG 内のテキスト要素の font-size 属性は、ビューポートの寸法を基準にして解釈される「ユーザー単位」で指定できます。

たとえば、ビューポートが 0 0 100 として定義されている場合100、フォント サイズ 1 は SVG 要素の 100 分の 1 に相当します。 size.

制限事項

残念ながら、CSS 計算だけでこの機能を実現する簡単な方法はありません。その理由は、コンテナの寸法ではなく、継承されたサイズに基づいてフォント サイズのパーセンテージが解釈されることにあります。理論的には、bw (ボックス幅) のような単位をこの目的に使用できますが、その実装は現在標準化されていません。

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