ピクセルからREM変換ツール
pxとrem/emを相互に変換できます。ルートフォントサイズを設定して、一般的なサイズの変換テーブルを即座に取得できます。
px
Convert
px
rem
Conversion Table (root = 16px)
| px | rem | em | pt | |
|---|---|---|---|---|
| 4 | 0.25rem | 0.25em | 3pt | |
| 8 | 0.5rem | 0.5em | 6pt | |
| 10 | 0.625rem | 0.625em | 7.5pt | |
| 12 | 0.75rem | 0.75em | 9pt | |
| 14 | 0.875rem | 0.875em | 10.5pt | |
| 16 | 1rem | 1em | 12pt | |
| 18 | 1.125rem | 1.125em | 13.5pt | |
| 20 | 1.25rem | 1.25em | 15pt | |
| 24 | 1.5rem | 1.5em | 18pt | |
| 28 | 1.75rem | 1.75em | 21pt | |
| 32 | 2rem | 2em | 24pt | |
| 36 | 2.25rem | 2.25em | 27pt | |
| 40 | 2.5rem | 2.5em | 30pt | |
| 48 | 3rem | 3em | 36pt | |
| 56 | 3.5rem | 3.5em | 42pt | |
| 64 | 4rem | 4em | 48pt | |
| 72 | 4.5rem | 4.5em | 54pt | |
| 80 | 5rem | 5em | 60pt | |
| 96 | 6rem | 6em | 72pt | |
| 112 | 7rem | 7em | 84pt | |
| 128 | 8rem | 8em | 96pt |
ピクセルからREM変換ツールの使い方
- 1ルートフォントサイズを設定します（デフォルト：16px）。
- 2ピクセル値を入力してrem/emに変換します。
- 3一般的なサイズの完全な変換テーブルを表示します。
- 4テーブルから任意の値を直接コピーできます。
Zenovayアナリティクス
関連ツール
よくある質問
px、rem、emの違いは何ですか?▾
px（ピクセル）は絶対単位です — 1pxは常に1デバイス非依存ピクセルであり、コンテキストに関わらずです。rem（ルートem）はルート要素（<html>）のフォントサイズに相対的です。ルートが16pxの場合、1rem = 16px、2rem = 32px。emは現在の要素のフォントサイズに相対的です — divのfont-sizeが20pxの場合、そのdiv内では1em = 20pxです。remはレイアウトに推奨されます。なぜなら一貫性があるからです。emは自分のフォントサイズでスケールする必要があるコンポーネント内のタイポグラフィに推奨されます。
なぜremの代わりにpxを使用するのですか?▾
rem単位はユーザーのブラウザフォントサイズの設定を尊重します。ユーザーがアクセシビリティのためにブラウザの基本フォントサイズを増加させると、remベースのレイアウトは比例してスケールします。pxベースのレイアウトはそうではありません。さらに、remはデザインシステムの数学を簡素化します — デザインスケールが4px（0.25rem）または8px（0.5rem）の増分に基づいている場合、rem値は直接変換されます。Tailwind CSSはすべてのスペーシングとタイポグラフィにremを使用します（text-lg = 1.125rem =デフォルト16pxルートで18px）。
どのルートフォントサイズを使用すべきですか?▾
ブラウザのデフォルトは16pxです。ほとんどのデザインシステム（Tailwind、Material UI、Bootstrap）は16pxに基づいています。62.5%のルートフォントサイズを使用する場合（10pxベース — 一般的なトリック：html { font-size: 62.5% }）、1rem = 10pxになり、数学が簡単になります（例えば、1.4rem = 14px）。62.5%のトリックはアクセシビリティに影響があります — すべてのrem計算でユーザーのブラウザフォントサイズの設定をオーバーライドします。
ビューポート単位（vw、vh）をどのように変換しますか?▾
ビューポート単位（vw、vh、svh、dvh）はフォントサイズではなく、ビューポートサイズに相対的です。1vw =ビューポート幅の1%。1vh =ビューポート高さの1%。変換するには：px値=（vw値/100）×ビューポート幅。ビューポートサイズは変わるため、vw/vhは固定されたpx値として表現することはできません。このコンバーターはフォント相対単位（px、rem、em）に焦点を当てています。
流動的なタイポグラフィ用のclamp()関数とは何ですか?▾
clamp（min、preferred、max）は、最小値と最大値の間でスケールする値を作成します。流動的なタイポグラフィの場合：font-size: clamp(1rem, 2.5vw, 2rem) — フォントはビューポート幅でスケールしますが、16pxより小さいまたは32pxより大きいことはありません。これにより、タイポグラフィの複数のブレークポイントが置き換わります。「優先」値は通常、vwベースの式です：calc(1rem + 0.5vw)など。