最近はレスポンシブ対応などで、フォントサイズの指定に迷ってしまいます。
レスポンシブのない時代はpxを使っていて、その後yui fontをSASSで使用してましたが、親要素に引っ貼られてしまうし、新しい技術も調べてみたかったので、まとめてみました。
YUI Font
|
1 |
#demo1 {font-size:85%;} /*renders 11px */ |
枯れた技術のYUI。と言いつつ最近のプロジェクトで使ったこともあります。pxを使った場合に発生する、ブラウザ間の差異をなくしてくれるものです。%指定なので親要素に引っ貼られてしまうのが問題ではあります。
em
Pxの強化版。だけど親要素に引っ貼られてしまうのが玉に瑕。
こちらはbodyにremを使用して、バグを回避しています。でもIE疑似要素については言及してませんね。そこだけpx使うとかかな。
rem
|
1 2 3 |
html { font-size: 62.5%; } body { font-size: 1.4rem; } /* =14px */ h1 { font-size: 2.4rem; } /* =24px */ |
Root em。親要素に引っ貼られることなく、直感的に使用することができる。当初大本命的に扱われてましたが、バグ多いですね。
こちらの方はpxとremの二段構えで挑もうとしています。正直2つ分指定するのは面倒くさいです。
でもAutoprefixerを使うことで自動的にpxを出力してくれるので、この点は問題ないと思います。
気をつけなければ行けないところは、IEでは最新版にも関わらず疑似要素でバグがあるそうです。
ビューポート基準
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
html { font-size: 100%; // 600px以降から、100pxごとに1px大きくなる @media (min-width: 600px) { font-size: calc(112.5% + 4 * (100vw – 600px) / 400) } // 1,000px以上は、22pxに @media (min-width: 1000px) { font-size: calc(137.5%) } } |
calcやvwなんていうCSS3時代のフォントサイズ設定。メディアクエリーで再度指定する手間がかからないので、めちゃ便利みたい。でもpxみたいに直感的にわかりにくいしなぁ。
この方のやり方はなかなかいいのでは、と思います。
ただ、vwとcalc()はAndroid4.4未満では使用できません。とある通り、実用化はまだ先になるでしょう。
このあたり本当数学の分野似になってきているので、頭悪い自分の手には負えないですね。。。。。
まとめ
自分の場合は疑似要素に気をつけつつremをAutoprefixer使いつつ利用していこうと思いました。