CSS でフォ​​ント サイズをコンテナ サイズに比例して拡大縮小するにはどうすればよいですか?

CSS でのコンテナ サイズによるフォント サイズのスケーリング

CSS では、フォントのスケーリングには制限があるにもかかわらず、コンテナのサイズに基づいてフォント サイズを比例的に調整する方法が提供されています。

これを実現するには、ビューポートの幅単位を使用します。 (vw):

#mydiv { font-size: 5vw; }

この設定では、#mydiv で示されるコンテナ内のフォントは、ビューポートの幅のパーセンテージで常に拡大縮小されます。

あるいは、SVG 埋め込みを使用することもできます。 HTML では別の解決策が提供されます。このアプローチでは、テキスト要素の font-size 属性は、ビューポートの寸法に関連する「ユーザー単位」として解釈されます。たとえば、0 0 100 100 として定義されたビューポート内のフォント サイズ 1 は、SVG 要素のサイズの 100 分の 1 を表します。

CSS パーセンテージ内の計算は常に継承されたフォントを基準に行われることに注意することが重要です。コンテナのサイズではなく、サイズです。したがって、CSS には、「bw」（ボックス幅）のような、コンテナの幅に基づいてフォント サイズを拡大縮小するための指定された単位がありません。

以上がCSS でフォ​​ント サイズをコンテナ サイズに比例して拡大縮小するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。