ヘルプとドキュメント
UX / UI 小さな影響 中程度 30～60分
相対フォント単位 (rem/em vs px)
フォント サイズには固定ピクセルよりも rem/em を優先します。
それは何ですか
フォント サイズは px 単位で固定的に指定することも、rem/em 単位で相対的に指定することもできます。 Rem はドキュメントの基本サイズに基づいているため、ユーザーのブラウザのフォント サイズ設定に応答します。
なぜそれに対処するのでしょうか？
ユーザーがブラウザーのデフォルトのフォント サイズを大きくすると、ピクセルが無視される問題を修正しました (視力の弱い人によく見られます)。 Rem/em はこの設定を尊重します。よりアクセスしやすく、一貫して拡張するのが簡単です。
やり方
- 1基本サイズを <html> に設定します (通常は 100% = 16px)。
- 2フォント サイズをレム単位で指定します (例: 1rem、1.25rem、0.875rem)。
- 3サイズが親から派生する必要がある場合は em を使用します。
- 4スケーリングが意味をなさない詳細 (例: 1px の線) の場合のみ、固定ピクセルのままにしておきます。
例
Špatně
h1 { font-size: 32px; }
p { font-size: 14px; }Správně
html { font-size: 100%; }
h1 { font-size: 2rem; }
p { font-size: 0.95rem; }結論
相対単位はアクセスしやすく、保守しやすくなっています。これは、Zoom がブロックされるような大惨事ではありませんが、新しいサイトでは最初から rem を使用して正しく実行する価値があります。フォント サイズを大きくするユーザーを尊重します。
関連トピック