html - レスポンシブ デザインのフォント サイズ

Question

さまざまなビューポート サイズでフォント サイズを変更するための賢明な戦略は何ですか? 3 つの異なるオプションが表示されます。

1. ビューポートのサイズが小さくなると、フォント サイズも小さくなります。
2. すべてのビューポート サイズで同じフォント サイズ。
3. ビューポートのサイズが小さくなると、フォント サイズが大きくなります。

最良の選択肢は何ですか?またその理由は何ですか?

Answer 1

これは自由回答形式の質問のようなものです。なぜなら、実際には次のような問題があるからです。あなたのコンテンツには何が必要ですか?

ページに長い段落のテキストがありますか? それとも、見出しの多いホームページを見ていますか?

一般的に、本文テキストを扱う場合、モバイル/小さな画面サイズに合わせてベース フォント サイズを設定することでアプローチする傾向があります。次に、ビューポート サイズを大きくして、フォント サイズを大きくします。ビューポートのサイズとブレークポイントは? それはまたコンテンツに依存します。テキストの 1 行あたりの文字数に注意する必要があります。長くなりすぎると、フォントサイズを大きくする必要があります。このアプローチはデバイス固有ではなく、コンテンツ固有です。

また、vw font size unit にも注意してください。うまくいけば、すぐに使用を開始できるようになります。

Answer 2

私は、emまたはremコンテンツテキストとして使用されるフォントサイズを使用するのが好きです。このテキストのレンダリング方法をデバイスに決定させます。

デザインクリティカルなテキスト（見出しやナビゲーションアイテムなど）の場合はpx値を使用しますが、これには（r）を使用しても問題ありませんem。

テキストをコンテナに合わせて拡大縮小する必要がある場合は、 fittextJSというプラグインを使用して幸運を祈りました。