v6.15とかでちょっとem単位を使うようにした話を書いた。そこで書いたのは「描画領域に収まるレイアウト」ではなくて「文章の収まりを意識したレイアウト」にしたかったとかそういう話だった。id:vantとかu:studiomohawkなどがブックマークしてたThe EMs have it: Proportional Media Queries FTW!ではもうひとつのem単位を使うメリット、Media Queriesでem単位を使うとユーザーのズーム(スケーリング)に対応できる点を解説していた。
em単位をMedia Queriesで使うとpx単位と違いユーザーのズームが考慮されて計算される(ただしウィンドウサイズを変更した時などとは違い即座に反映されるわけではないのでリロードが必要)。1emが16pxな環境で200%にズームしていると1emが32px相当になり、それを基準にMedia Queriesが解釈されるということ。上記エントリで例として挙げられているようにナビゲーションのレイアウトをMedia Queriesで調節している場合、em単位をちゃんと使えばユーザーのズームが考慮されるため結果としてだいたい意図した通りに表示されるようになる。
これはem単位の方が優れているという話ではなくて、幅広いデバイスとユーザー環境を考慮する場面ではだいたい良きにはからってくれるem単位が向いているという話。
.test {
border-radius: 0.0625em;
line-height: 1.75em;
}1pxの角丸を作ろうとしてこう書くのは頭悪いし、line-heightプロパティーでは単位なしが良い。こういう風に「今まではバカみたいにpx単位だけ使ってれば平和だったけどそうじゃなくなったから……」と、単に単位を全て変更するのでは意味がない。もっとそれぞれの単位についてちゃんと知って、その時々に応じて適切な単位を取捨選択することによりFuture FriendlyなWebサイトを作ろう！ ということ。
HTML5 BoilerplateとかもGitHub上の最新開発版ではem単位でMedia Queries書きましょうみたいな感じになってたりするので、サクサクと移行が進みそうな気配はある。本当はem単位じゃなくてrem単位だよね。あとcalc()……。