ビューポート ユニットは CSS のレスポンシブ フォント サイズの問題をどのように解決できるでしょうか?

CSS でのレスポンシブ フォント サイズ設定: ビューポート単位を使用したソリューション

Zurb Foundation 3 グリッドを使用しているときに、h1ヘッダー テキストは固定されたままであり、モバイル デバイスで水平スクロールが発生しました。この問題は、フォント サイズが em やピクセルなどの固定単位を使用して設定されているために発生します。

レスポンシブなフォント サイズ設定を実現するには、代わりにビューポート単位の使用を検討してください。ビューポートの単位はビューポートの幅または高さに相対的であり、ブラウザのサイズ変更に合わせてテキストが比例して拡大縮小されます。

解決策:

フォント サイズ変更のビューポート単位を次のように実装します。

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

ここでフォントサイズを設定します使用:

• 水平方向の応答性を維持するための h1 の vw (ビューポートの幅)
• 垂直方向に調整するための h2 の vh (ビューポートの高さ)
• vmin (vw の小さい方) vh) p については、さまざまなビューポート サイズにわたって可読性を確保します

このアプローチは、その結果、テキストがブラウザーの幅と高さに動的に適応し、デスクトップとモバイル デバイスの両方で最適なユーザー エクスペリエンスを実現します。

以上がビューポート ユニットは CSS のレスポンシブ フォント サイズの問題をどのように解決できるでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。