CSSでよく出てくる単位といえば、次の２つ

• px ： ピクセル単位
• rem ： 相対的なサイズ

この２つを互いに変換したいことがありました。

意外と簡単なやり方があったので、
ここでは JavaScriptで rem ⇔ px を相互変換する方法 をまとめます。

まずCSSでの px と rem の意味について

CSSでレイアウトを考えるとき、重要なのがこの２つ。

一応これが何かを説明しておくと次みたいな感じです。

• px（ピクセル）
  あるデバイスでのドット１つ分の大きさを表す単位。ただし、ピクセル密度が標準の４倍のデバイスとかだとドットサイズは１／４になる。
• rem（ルートエム）
  ルート要素を基準にしたフォントサイズの単位。親要素で値が変わってしまう em の欠点をなくした上位互換みたいなもの

フォントサイズとか、要素の幅とか、いろいろな場面で使いますよね。

ほとんど場面だとCSSから指定することがほとんど

でも次みたいにスクリプトでアレコレしたい場面もあります。

• remから要素幅をピクセルで取得した
• px指定のフォントサイズをremに直したい

こういうときに「どうやるのかな～」と疑問でした。

そして色々調べていくうちに、次の２つの方法を見つけます。

まず rem ⇒ px に変換する方法について

始めは rem単位 を px単位 に変換するやり方について

これは次のような感じで変換可能です。

•  ルート要素のフォントサイズ取得
• その値に変換したいrem数をかけるだけ

手順で書くと簡単だけど、コードだと少し特殊なコードになります。

そのやり方は例えば次コードみたいな感じです。

▼ 次みたいな関数を作ってみた

ここで大事なポイントは次の３つ

• ルート要素を参照すること
  何度も言うように rem はルート要素から相対しているフォントサイズの単位。なので document.documentElement  を参照しないとダメ
• フォントサイズを計算する
  ここでは getComputedStyle  を使うことで基本的な値に計算された全てのCSSプロパティを取得。その中の fontSize  には "16px"  などの値が入っている
• 必ず parseFloat を使う
  フォントサイズは "16px"  などのように単位を含んでいるので、数値に変換することが必要！

あとは変換したい rem を渡せばOKです。

実際にこの関数を、いくつかのサイト内で試してみた結果がコチラ

▼ google.co.jp で試してみた

▼ pisuke-code.com（このブログ）で試してみた

開発者ツールで確認してみたら、両方とも正しい値だったです。

こういう風にひと手間加えれば rem ⇒ px の変換も難しくありません。

逆に px ⇒ rem に変換するには

お次は px単位を rem 単位に変換するやり方

これは今紹介した方法の逆をすればいいだけです。

実際に書いてみたコードは次みたいなの

▼ 逆変換する関数のコード例

フォントサイズは px単位 のはずなので、そのまま変換したいピクセル数から割ればいいだけです。

この関数についても、いくつかのサイトで試してみました。

▼ yahoo.co.jpで試してみた結果

▼ bing.comで試してみた結果

Yahooって予想以上にベースの font-size は小さい模様。

逆にBingだと 16px ＝ 1rem と、かなり大きめに設定されてるみたいです。

ここまでのまとめ

まあ px ⇔ rem の変換方法はこんな感じ。

もっと複雑なコードが必要かも思いきや、意外と簡単でした。

CSSだけで対応できないレイアウトを作るとき便利かもです。