どちらの欄に入力してもかまいません。表の行をクリックすると読み込み、下にCSSを貼ると一括変換します。
24px = 1.5rem = 18pt = 150%
| px | rem | pt |
|---|---|---|
| 1px | 0.0625rem | 0.75pt |
| 2px | 0.125rem | 1.5pt |
| 4px | 0.25rem | 3pt |
| 6px | 0.375rem | 4.5pt |
| 8px | 0.5rem | 6pt |
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 28px | 1.75rem | 21pt |
| 32px | 2rem | 24pt |
| 36px | 2.25rem | 27pt |
| 40px | 2.5rem | 30pt |
| 48px | 3rem | 36pt |
| 56px | 3.5rem | 42pt |
| 64px | 4rem | 48pt |
| 72px | 4.5rem | 54pt |
| 80px | 5rem | 60pt |
| 96px | 6rem | 72pt |
| 128px | 8rem | 96pt |
.card {
padding: 1.5rem 2rem;
margin-bottom: 1rem;
font-size: 1.125rem;
line-height: 1.75rem;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
}pxは固定のCSS単位で、1remはルート要素htmlのフォントサイズに等しく、どのブラウザでも既定は16pxです。文字サイズ、余白、レイアウトをremで指定すると、ユーザーがブラウザ設定で既定の文字サイズを大きくしたときにすべてが一緒に拡大されます。これはアクセシビリティの重要な要件です(WCAG 1.4.4 テキストのサイズ変更)。計算は簡単で、rem = px ÷ ルートフォントサイズなので、基準16pxなら24pxは1.5remです。emも同様ですが親要素のフォントサイズが基準となり、入れ子になると積み重なります。
貼り付けたCSSも含め、変換はすべてブラウザ内で行われます。何もアップロードされません。
ルートフォントサイズを確認します。プロジェクトがhtml { font-size }を10pxや62.5%などに変えていなければ16pxのままにします。
px欄に値を入れるとremが、rem欄に入れるとpxが表示されます。下の行にはptとパーセントも表示されます。
表の任意の行をクリックすると、1pxから128pxまでのよく使うサイズを読み込めます。
一括変換欄にCSSを貼り付けると、すべてのpx値がremに、0pxは0になり、1pxの線はpxのまま残せます。結果をスタイルシートにコピーします。
14 / 16 / 20 / 24 / 32pxの文字サイズは0.875 / 1 / 1.25 / 1.5 / 2remになり、ユーザーがブラウザで文字を大きくすると見出しも大きくなります。
pxで書かれた古いCSSを貼り付け、padding、margin、font-sizeをまとめて変換し、メディアクエリを見直して細い線はpxのまま残します。
デザイナーはpxでサイズを渡します。4、8、12、16、24pxの余白トークンを0.25、0.5、0.75、1、1.5remに変換してデザインシステムに使います。
html { font-size: 62.5% }で1rem = 10pxにするプロジェクトもあります。ルートサイズを10にすれば24pxは分かりやすい2.4remになります。
文字サイズとほとんどの余白はremにして、ユーザーの文字サイズ設定を尊重しましょう。拡大させたくない枠線、影、細部はpxでも問題ありません。
remはルートのhtmlのフォントサイズが基準なので予測しやすいです。emは親要素が基準なので入れ子にすると掛け算になり、コンポーネントでは便利ですが間違えやすいです。
どのブラウザでも既定は16pxですが、ユーザーが変更でき、CSSでhtmlを上書きすることもできます。プロジェクトで実際に使っているルートサイズで変換してください。
emやremのメディアクエリは、htmlのルールではなくブラウザ既定の文字サイズが基準で、ユーザーが文字を拡大すると追従します。そのためメディアクエリにemを使うチームも多くあります。