CSS を使用してヘッダー テキストをレスポンシブにするにはどうすればよいですか?

CSS のレスポンシブ フォント サイズ

レスポンシブ フォント サイズにより、テキストがさまざまな画面サイズにシームレスに調整され、ディスプレイが狭いデバイスでの水平スクロールが防止されます。この Q&A では、Zurb Foundation 3 のフォント サイズの応答性に関するクエリを詳しく調べ、ビューポート ユニットを使用した解決策を提供します。

Q: ブラウザのサイズを変更すると、大きなヘッダー テキストが調整されないのはなぜですか

A: デフォルトでは、ems、ピクセル、ポイントなどの CSS 単位は静的であり、ビューポート サイズの変更。

Q: Zurb Foundation 3 タイポグラフィのサンプル ページにあるような応答性の高いヘッダーを実現するにはどうすればよいですか?

A: ビューポート ユニットを利用できます。ビューポートの寸法を基準にしてフォント サイズを定義します。これにより、フォント サイズをビューポートに合わせて動的に拡大縮小できます。

解決策:

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

これらの例:

• vw - ビューポートの 1% width
• vh - ビューポートの高さの 1%
• vmin - vw または vh
• vmax の小さい方 - vw またはvh

ビューポート ユニットを使用すると、さまざまなビューポートのサイズに適応するレスポンシブなフォント サイズを作成でき、すべてのデバイスで最適な読みやすさを確保できます。

以上がCSS を使用してヘッダー テキストをレスポンシブにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。