JavaScriptでの rem ⇔ px に変換するテクニック&コード例

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

 

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

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

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

  • ルート要素を参照すること
    何度も言うように 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だけで対応できないレイアウトを作るとき便利かもです。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください