コンテナのサイズに合わせてテキストのサイズを動的に変更するにはどうすればよいですか?

コンテナ サイズに合わせてテキストのサイズを変更する

クエリの目的は、画面に応じてサイズ変更されるコンテナ内のテキストのフォント サイズを動的に調整することです。寸法。それぞれの問題に対処する方法は次のとおりです:

テキストのサイズ変更:

CSS の calc() 関数を使用して、コンテナの幅のパーセンテージとしてフォント サイズを計算します。身長。例:

#maininvite h2 {
  font-size: calc(4% + 1em); /* Adjusts font size based on container width */
}

複数の解像度の処理:

多数の CSS メディア クエリを使用する代わりに、より効率的な解決策は、CSS の流動的なレイアウト技術に依存することです。パーセンテージ、em 単位、または vw および vh 単位を使用すると、レイアウトはさまざまな画面サイズに自動的に調整されます。

このアプローチと calc() を併用してテキストの比例を確保する更新された CSS スニペットを次に示します。コンテナへ:

html,
body {
  height: 100%;
  width: 100%;
}

#launchmain {
  width: 55vw;
  display: inline-block;
  position: relative;
  top: 10vh;
  left: 25vw;
}

#maininvite {
  width: 33vw;
  height: 53vh;
  position: absolute;
  top: 22vh;
  left: 33vw;
}

#maininvite h2 {
  font-size: calc(4% + 1em);
}

以上がコンテナのサイズに合わせてテキストのサイズを動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。