📐
無料ピクセルからREMへのコンバーター
構成可能な基本フォント サイズを使用して、px、rem、em、pt、vw、vh、および % の間で変換します。一般的なピクセル サイズの参照テーブルが含まれています。
読み込み後はオフラインでも動作
1rem
コンテキスト（rem/em/vw/vh/%に影響）
16 px のすべての変換
最も近いTailwindトークン（16pxルートで）
一般的なpxサイズ → rem（16pxベース）
貼り付けたCSSを変換
主な用途
- ウェブ開発用PXからREMスケーラブルでアクセス可能なCSSのためにピクセル値をrem単位に変換します。ベースフォントサイズを設定し、すべての同等の値を一目で確認してください。
- レスポンシブデザイン用CSS単位px、vw、vh、％間を変換して、異なる画面サイズと向きに正しく応答するレイアウトを構築します。
- 設計仕様をCSS単位に変換Figmaまたはスケッチピクセル値をrem/em単位に翻訳して、クリーンでスケーラブルなCSS実装を行います。
- Tailwind CSSユニットリファレンスTailwind CSSサイジングクラスがピクセルとrem値にどのようにマップされるかを理解して、正確な実装をします。
- 印刷スタイルシートのCSS単位を変換印刷メディアクエリとPDF出力CSSのためにpx、pt、remの間を変換します。
使い方
すべての変換は、依存関係のない手書きの演算エンジンを使ってブラウザ内で完全に行われます。ツールは7つのCSS単位（px、rem、em、pt、vw、vh、%）の間を、すべての計算をピクセルという共通の基準を経由させ、設定したルートフォントサイズ、親フォントサイズ、ビューポート寸法に対する単純な除算または乗算を適用することで変換します。
- 1コンテキストの値を設定する変換する前に、相対的なCSS単位を意味あるものにする4つの数値 — ルートフォントサイズ（デフォルト16px、ブラウザのデフォルト値）、親要素のフォントサイズ（emと%の変換用）、ビューポートの幅と高さ（vwとvh用）— を設定します。これらはブラウザが実行時にCSSを解決する際に使うのと同じ値です。
- 2ピクセルを普遍的な中間値として使うコンバーターはまずtoPixels()を呼び出して入力を生のピクセル数に正規化します — 例えば1.5remは1.5 × baseFontPxになり、50vwは0.5 × vpWidthになります。次にfromPixels()がそのピクセル数を目標単位に応じた係数で割ります。7つの単位すべてが変換テーブルに同時に表示されます。
- 3最も近いTailwindトークンの検索変換後、ツールはrem値を計算し、2つのハードコードされたルックアップテーブル — Tailwindの13のフォントサイズトークン（text-xsからtext-9xlまで）とその間隔スケール — を、絶対距離で最も近いものを見つけるためスキャンします。=記号は値が正確なトークンであることを、≈は最も近い近似値であることを意味します。
- 4正規表現によるバッチCSS書き換えCSS貼り付けパネルは生のCSSテキストを受け付け、正規表現置換を適用します：px→remモードでは、すべてのpxトークンに一致し、数値部分をvalue/baseFontPx + remに置き換えます。rem→pxモードではその逆を行います。置換数が表示されるため、いくつの値が書き換えられたか確認できます。