1chと1pxがどちらが大きいかはすぐにわかることだが、1chと10pxとするとちゃんと答えられる人は少数派だろう。正解はフォントによって違う、だ。その要素で使われているフォントの特定のグリフの特定のパーツの正確なサイズを知らなければ、chやex単位をpx単位に変換することはできない。
例えば標準的なArial (のRegular)と特徴的なImpactでどのように変わってくるのかを表にまとめてみよう。基本のフォント・サイズは16pxになっているとする。Chrome 41での結果であることも明記しておく。
| フォント | 100em |
100ch |
100ex |
|---|---|---|---|
| Arial | 1600.000px |
889.844px |
829.688px |
| Impact | 1600.000px |
857.813px |
1036.719px |
1emが必ず16pxになることに対して、chとex単位ではフォントによって変化している。それぞれのフォントのグリフの特定のパーツ、ch単位では0の幅、ex単位ではxの高さ(とされるx-height)、が考慮された上でpx単位に変換され、計算済みスタイルの値となっていることがわかる。Impactのようなx-heightがかなり高く設定されているフォントではex単位で大きく差が出てくるというわけだ。
このことは普通にCSSのプロパティーの値として使う場合はあまり問題になることはない。しかしながらブラウザー以外の何らかのツールで扱おうとすると一定の決めつけが必要となる。そうでないとフォントを調べて係数をひねり出さなければならなくなるからだ。
少なくともメディア・クエリーにおいては初期設定の値を基準として変換されることになるので、Arial (やHelvetica Neue)を基準にした係数を使って変換するのが妥当だろう。Chrome 41でArialを使って調べたpx単位に変換するための係数は以下の通りだ。
| 単位 | to px |
|---|---|
1ch |
8.8984375 |
1ex |
8.296875 |
これらの係数を使ってpx単位に変換することで、(min-width: 2ch)というクエリーは(min-width: 1em)というクエリーよりも後に書いた方が良さそうだということがわかる。
実際にはメディア・クエリーで使う長さの単位は余程の事情がない限り統一すべきだろう。そして、その統一した単位とは別の単位が使われている可能性があるサードパーティ製のライブラリーは何らかのツールで機械的に処理すべきではない。そのためこういった変換のことを考える必要はまずない。
それでもどうにかして処理してやりたいという場合には、このようにArialやHelvetica Neueを想定して変換してやるしかなさそうだ。