css3で追加されたフォントサイズ remをIE8でも使う

レスポンシブなデザインをすることが多くなりまして、そうなるとフォントサイズがとても重要になりますね。
個人的にはremを使ってます。

remは「root」+「em」ということで、つまりルート(または html要素)からの相対値でフォントサイズを指定できます。
%やemだと親要素からのフォントサイズを継承するためフォントサイズの調整がちょっと大変でした。
しかし、remだとあくまでもrootの要素からなので、フォントサイズの調整も容易です。

とくにレスポンシブなデザインをする際は、rootの要素のフォントサイズを調整すればいいだけなのでとても便利。

個人的には、以下のようにしてます。

[css]
/* 計算しやすいようにrot要素に10px相当のサイズを指定 */
html {
font-size: 62.5%;
} [/css]

sass のmixinを使って以下のようにしておく。

[ruby]
@mixin font-size($sizeValue: 1.3){
// rem未対応ブラウザのfallback
font-size: ($sizeValue * 10) + px;
 //対応ブラウザにはoverwrite
font-size: $sizeValue + rem;
} [/ruby]

ですかね。

Comments