| px | rem | em | pt | % |
|---|---|---|---|---|
| 1 | 0.0625 | 0.0625 | 0.75 | 6.25 |
| 2 | 0.125 | 0.125 | 1.5 | 12.5 |
| 4 | 0.25 | 0.25 | 3 | 25 |
| 8 | 0.5 | 0.5 | 6 | 50 |
| 10 | 0.625 | 0.625 | 7.5 | 62.5 |
| 12 | 0.75 | 0.75 | 9 | 75 |
| 14 | 0.875 | 0.875 | 10.5 | 87.5 |
| 16 | 1 | 1 | 12 | 100 |
| 18 | 1.125 | 1.125 | 13.5 | 112.5 |
| 20 | 1.25 | 1.25 | 15 | 125 |
| 24 | 1.5 | 1.5 | 18 | 150 |
| 28 | 1.75 | 1.75 | 21 | 175 |
| 32 | 2 | 2 | 24 | 200 |
| 36 | 2.25 | 2.25 | 27 | 225 |
| 40 | 2.5 | 2.5 | 30 | 250 |
| 48 | 3 | 3 | 36 | 300 |
| 56 | 3.5 | 3.5 | 42 | 350 |
| 64 | 4 | 4 | 48 | 400 |
CSS ユニット コンバーターとは何ですか?
CSS Unit Converter は、CSS がタイプとレイアウトのサイズ設定に使用する単位 (px、rem、em、pt、%) 間の長さを変換します。これは、最新のレスポンシブ デザインが相対的な単位 (ユーザーのフォント サイズ設定とズームを伴う rem および em スケール) に依存しているために存在します。一方、デザインのモックアップや古いスタイルシートは通常、固定ピクセルで表現されます。このツールは 24px のような値を取得し、一度に 1.5rem、1.5em、18pt、150% として表示し、単一のフィールドからあらゆる方向に動作します。
変換はすべて1 つの数字にヒンジされます: ルート (ベース) フォントサイズ、それがhtml要素のブラウザのデフォルトであるため、デフォルトは16pxです。 1つのremは常にそのベースフォントサイズに等しいので、16pxでは値16pxは1rem、24pxは1.5rem、8pxは0.5remです ポイントはCSS参照ピクセルに結び付けられます - 1インチは96pxと72ptです - したがって、1ptは96/72、約1.333pxに等しくなりますパーセントはベースフォントサイズのシェアとして扱われるため、100% はベースに等しく、50% はその半分に等しくなります。
入力するとすべてがブラウザで実行されるため、アップロードもサーバーでの待機も、変換する値の数に制限もありません。 基本フォント サイズを変更して、独自のフォント サイズを設定するコンポーネントをモデル化し、すべての単位で結果を読み取って、必要なものをコピーします。 組み込みの PX-to-REM テーブルは、タイプ スケールで最も多く表示されるサイズのすぐに参照できます。
CSS ユニット コンバーターの使い方
値を入力してその単位を選択します
変換したい数値を入力し、現在入っている単位 - px、rem、em、pt、または % を選択します。 24px などの値をその単位で貼り付けることもできます。ツールが単位を読み取ります。
基本フォントサイズを設定する
プロジェクトで 16px ブラウザーのデフォルト以外のものを使用する場合は、ルート フォント サイズを調整します。 これは、REM、EM、および % がピクセルにどのように関係するかを制御します。
すべてのユニットを一度に読む
コンバータは、サポートされているすべてのユニットで、それぞれにユニット サフィックスが付いているので、それを直接 CSS にドロップすることができます。
参照テーブルをコピーまたは使用する
クリックで結果をコピーするか、または PX-to-REM のリファレンス テーブルをスキャンして、タイポグラフィ スケールで一般的なサイズを探します。
主な機能
すべてのユニットを一度に
1 つの値を入力すると、すぐに PX、REM、EM、PT、% を並べて表示し、それぞれがその単位で書式設定されているため、スタイルシートに直接貼り付けることができます。
構成可能な基本フォント サイズ
ルートのフォント サイズは調整可能であるため、rem、em、および % コンバージョンは、16px デフォルト、10px "62.5%" トリック、またはコンポーネント レベルのフォント サイズを使用するかどうかにかかわらず、プロジェクトと一致します。
双方向、任意の方向
決まった "from" と "to" はありません。 px を rem に、rem を px に、px を em に、または pt を px に - 任意の単位を任意の単位に - 単一の入力から変換します。
PX-to-REM リファレンス テーブル
組み込みの表には、タイプ スケールで最も表示されるピクセル サイズの REM、EM、PT、および % の同等物がリストされているため、選択したベースでスケール全体を目で見ることができます。
Frequently Asked Questions
Related Tools
CSS Box Shadow Generator
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset - then copy production-ready CSS.
CSS Clamp Generator
Generate fluid, responsive CSS clamp() values that scale between viewports
Flexbox Generator
Build CSS flexbox layouts visually. Adjust justify-content, align-items, direction, wrap and gap with a live preview, then copy the generated CSS - all in your browser.
CSS Gradient Generator
Create beautiful CSS gradients with live preview
Comments
0 comments
No comments yet. Be the first to share your thoughts!