px を rem に変換する手順

スタイルシートを貼り付け、1rem が何ピクセルかを指定します。ページは px の長さを書き換え、これまでと同じ整形処理を通した結果を表示します。入力は送信されません。

割り算は正確です。16px の基準で 16px は 1rem、1.5px は 0.09375rem になり、16.5px のような小数の基準も丸めずにそのまま使います。

  1. CSS を入力欄に貼り付けるか入力します。宣言の値とメディアクエリを変換し、セレクター・文字列・コメント・url() の中身はそのままにします。
  2. 1rem が何ピクセルかを指定します。初期値の 16 は一般的なブラウザのルートサイズで、16.5 のような小数も使えます。
  3. border と border-top/right/bottom/left のショートハンドを px のまま残したいときは border のチェックを入れたままにします。1px の罫線を拡大縮小させないための一般的な方法です。
  4. 「変換」を押して結果をコピーします。「クリア」は入力と結果の両方を空にします。

変換される長さと、そのまま残る記述

変換される長さ

長さは宣言の値(padding、width、font-size、calc() 式、カスタムプロパティ)と、media・container・supports の条件の中で変換されます。数値の直後に px が続くものを対象にするため、大文字の 10PX も変換されます。

小数は書かれたとおりに変換します。16px の基準で 1.5px は 0.09375rem、.5px は 0.03125rem です。割り切れるときは正確な商を、10px を 16.5px の基準で割るような循環小数は小数 12 桁に丸めた値を出力します。

書き換えない記述

セレクター、クラス名、文字列、コメント、url() の中身はそのまま通すため、content: "10px"、.a10px、url(icon-10px.png) は変換後も変わりません。

このツールは px を rem に移すだけで、それ以外は扱いません。入力中の rem はそのまま残り、rem から px への変換はなく、em・%・vw・pt などの単位には触れません。

拒否される入力、基準値、出力

空のスタイルシート、空の基準値、0 以下や数値でない基準値は拒否します。メッセージはコントロール下のステータス行に表示し、直前の結果は消去するので、古い変換結果を新しいものと取り違えることはありません。

px が 1 つもない CSS はその旨を伝え、整形した CSS はそのまま表示します。整形は従来どおりで、1 行の入力は圧縮、複数行はインデントします。メッセージはページの言語(英語・スペイン語・ポルトガル語(ブラジル)・ドイツ語・フランス語・日本語)に従います。

最近使ったツール: