動的コンテナの寸法に対してフォント サイズを一定に維持するにはどうすればよいですか?

コンテナの寸法に応じて一定のフォント サイズを実現する

外部要因に基づいて寸法が変動するコンテナを操作する場合、維持するフォント サイズを設定します。コンテナに対して一定のサイズを維持することが課題となる可能性があります。 CSS を利用することで、このハードルを克服し、目的の結果を達成できます。

ビューポートの幅の単位を採用する: vw

フォント サイズをビューポートのパーセンテージとして決定するには幅には vwunit を使用します。例:

#mydiv {
  font-size: 5vw;
}

この例では、コンテナのサイズに関係なく、#mydiv のフォント サイズは常にビューポート幅の 5% になります。

埋め込み SVG の利用

別のアプローチを希望する場合は、埋め込み SVG をHTML。 font-size 属性を使用してテキスト要素のサイズを「ユーザー単位」で定義し、ビューポートの寸法に合わせます。例:

<svg viewBox="0 0 100 100">
  <text font-size="1">...</text>
</svg>

この SVG 内では、フォント サイズ 1 は SVG 要素のサイズの 100 分の 1 に相当します。

CSS 計算の制限

CSS 計算を使用して設定することはできないことに注意することが重要です。コンテナ サイズに対するフォント サイズのパーセンテージ。この制限は、フォント サイズの計算におけるパーセンテージが、コンテナの寸法ではなく、継承されたフォント サイズを基準として解釈されるという事実に起因しています。 bw (ボックス幅) のような単位はそのような機能を容易にしますが、CSS ではまだ提案されていません。

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