px ↔ rem & em 変換ツール
独自のルートサイズとコンテキストサイズに基づいて、px、rem、emを相互に変換。1つの値を入力するだけで、他の2つがリアルタイムに更新されます。
変換値
一般的な px → rem 変換（16px基準）
| px | rem |
|---|---|
| 8 | 0.5 |
| 12 | 0.75 |
| 14 | 0.875 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 32 | 2 |
| 40 | 2.5 |
| 48 | 3 |
すべての変換処理はお使いのブラウザ上で行われます。入力したデータがBroBroGoにアップロードされることはありません。
よくある質問
px、rem、emの違いは何ですか？
pxは固定の長さです。remはページのルート（html要素）のフォントサイズを基準とし、16pxルートの場合、1remは16pxになります。emは、その単位が指定されている要素の親要素のフォントサイズを基準とします。フォントサイズや余白をremで指定することで、ユーザーがブラウザのデフォルトフォントサイズを変更した際に、ページ全体が比例して適切に拡大縮小されるようになります。
なぜemの基準サイズ（em context size）が別にあるのですか？
em単位は、必ずしもルートではなく、その要素自身の親要素のフォントサイズを基準とします。emを正しく算出するために、その要素の基準となるフォントサイズを設定してください。両者が同じ場合は、ルートと同じ値に設定したままにしてください。
ルートフォントサイズが16pxではない場合はどうすればよいですか？
ルートフォントサイズのフィールドをお使いのCSSの設定に合わせて変更すると、すべてのrem値が即座に再計算されます。下部にあるクイック変換表は、多くのWebサイトで標準的に採用されている16pxルートを基準とした便利な早見表です。