PXからREM変換ツール

px (ピクセル) は絶対単位です - 16px はユーザー設定に関わらず常に 16px です。rem (ルート em) はルート要素のフォントサイズ (html 要素) に対して相対的です。デフォルトのブラウザルートフォントサイズは 16px なので、デフォルトでは 1rem = 16px です。ユーザーがブラウザのフォントサイズを変更した場合 (アクセシビリティのため)、rem ユニットはそれに応じてスケーリングされますが、px ユニットはスケーリングされません。これにより、rem はアクセス可能なデザインのフォントサイズと間隔に推奨されます。

rem はブラウザのアクセシビリティ設定で設定されたユーザーのフォントサイズの好みを尊重します。視覚障害のあるユーザーは、ベースフォントサイズを 20px または 24px に増加させる可能性があります。rem ベースのレイアウトは正しくスケーリングされ、px ベースのレイアウトはスケーリングされません。rem ではスケーリングも簡単になります: ルートのフォントサイズを変更して、すべての rem 値を比例的にスケーリングします。WCAG 2.1 成功基準 1.4.4 (テキストのサイズ変更) は、スケーラブルなユニットを推奨しています。Tailwind CSS はすべてのサイズユーティリティに rem を使用しています。

Tailwind はデフォルトで 1rem = 16px のベースを使用しています。4px 基本ユニット: text-xs (12px = 0.75rem)、text-sm (14px = 0.875rem)、text-base (16px = 1rem)、text-lg (18px = 1.125rem)、text-xl (20px = 1.25rem)、text-2xl (24px = 1.5rem)。間隔: p-4 = 1rem = 16px、p-8 = 2rem = 32px。ベースを変更するには: html { font-size: 10px } を設定して、1rem = 10px にします (1rem = 10px にすることは一般的なトリックです: 16px = 1.6rem)。

html { font-size: 62.5% } を設定すると、ルートフォントサイズは 16px の 62.5% = 10px になります。これは 1rem = 10px を意味し、心理数学を簡素化します: 16px = 1.6rem、24px = 2.4rem、100px = 10rem。これにより rem を px と同じくらい簡単に使用できます。欠点: html は現在 10px なので、body { font-size: 1.6rem } (ボディテキストの 16px) を設定する必要があります。一部のチームはこれを回避します。これはユーザーのフォントサイズの好みをオーバーライドするからです (16px ではなく、ユーザーが選択したサイズの 62.5%)。

em は親要素のフォントサイズに相対的です (ルートではなく)。em を使用する場合: コンポーネントレベルのスケーリング (ボタンのパディングはボタンのフォントサイズでスケーリング)、メディアクエリ (em ベースのクエリはユーザーのフォントサイズの変更をより適切に尊重)、letter-spacing および line-height は現在の要素のフォントサイズに対して相対的です。ネストされたコンポーネントが予期しない複合スケーリングを引き起こす可能性がある場合、レイアウト間隔で em を避けてください。rem はグローバルスケール、em はコンポーネント相対値に使用します。