レスポンシブ Web デザインでフォント サイズをコンテナ サイズに比例して拡大縮小するにはどうすればよいですか?

DIV サイズに比例してフォント サイズを変更する

さまざまな画面サイズに適応する Web レイアウトを構築する場合、テキストはどの解像度でも読みやすいままです。よくある問題は、テキストがコンテナの寸法に比例してサイズ変更されないことです。

質問:

1. コンテナとの一貫した比率を維持するためにテキストのサイズを動的に変更する方法コンテナ?
2. さまざまな画面サイズに対して複数の @media クエリとカスタム レイアウトを利用することは実現可能なアプローチですか?

解決策:

この解決策CSS3 のみを利用し、JavaScript の必要性を排除します:

純粋な CSS3 アプローチ:

@media all and (min-width: 50px)   {  body  { font-size:0.1em;  } }
@media all and (min-width: 100px)  {  body  { font-size:0.2em;  } }
@media all and (min-width: 200px)  {  body  { font-size:0.4em;  } }
@media all and (min-width: 300px)  {  body  { font-size:0.6em;  } }
@media all and (min-width: 400px)  {  body  { font-size:0.8em;  } }
@media all and (min-width: 500px)  {  body  { font-size:1.0em;  } }
@media all and (min-width: 600px)  {  body  { font-size:1.2em;  } }
@media all and (min-width: 700px)  {  body  { font-size:1.4em;  } }
@media all and (min-width: 800px)  {  body  { font-size:1.6em;  } }
@media all and (min-width: 900px)  {  body  { font-size:1.8em;  } }
@media all and (min-width: 1000px) {  body  { font-size:2.0em;  } }
@media all and (min-width: 1100px) {  body  { font-size:2.2em;  } }
@media all and (min-width: 1200px) {  body  { font-size:2.4em;  } }
@media all and (min-width: 1300px) {  body  { font-size:2.6em;  } }
@media all and (min-width: 1400px) {  body  { font-size:2.8em;  } }
@media all and (min-width: 1500px) {  body  { font-size:3.0em;  } }
@media all and (min-width: 1500px) {  body  { font-size:3.2em;  } }
@media all and (min-width: 1600px) {  body  { font-size:3.4em;  } }
@media all and (min-width: 1700px) {  body  { font-size:3.6em;  } }

説明:

これらメディア クエリは、利用可能な画面幅に基づいてフォント サイズを 100 ピクセル単位で動的に調整し、読みやすく視覚的に適切なフォント サイズを確保します。

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