接続に失敗しました。もう一度試してください。

コンテンツにスキップ
SEO Tools
ヘルプとドキュメント
UX / UI 小さな影響 中程度 30～60分

相対フォント単位 (rem/em vs px)

フォント サイズには固定ピクセルよりも rem/em を優先します。

それは何ですか

フォント サイズは px 単位で固定的に指定することも、rem/em 単位で相対的に指定することもできます。 Rem はドキュメントの基本サイズに基づいているため、ユーザーのブラウザのフォント サイズ設定に応答します。

なぜそれに対処するのでしょうか？

ユーザーがブラウザーのデフォルトのフォント サイズを大きくすると、ピクセルが無視される問題を修正しました (視力の弱い人によく見られます)。 Rem/em はこの設定を尊重します。よりアクセスしやすく、一貫して拡張するのが簡単です。

やり方

  1. 1基本サイズを <html> に設定します (通常は 100% = 16px)。
  2. 2フォント サイズをレム単位で指定します (例: 1rem、1.25rem、0.875rem)。
  3. 3サイズが親から派生する必要がある場合は em を使用します。
  4. 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 を使用して正しく実行する価値があります。フォント サイズを大きくするユーザーを尊重します。

関連トピック