SCSSで古いIEなどにもrem感覚でフォントを指定する方法

少し見づらかったので、CSSを修正しました。あと、スマホ版も修正加えました。

多少は読みやすくなってるといいのですが…。

さて、本日の話題ですが。

CSS3にはemににたパラメータでremというものがありますね。

remは root + em からきているそうで、基本的にはemと同じように使えるのですが、常にルート（またはhtml要素）を基準にサイズを計算します。

親要素のサイズの影響をうけないのでかなりCSSの指定がやりやすくなります。

ただ、古いブラウザの場合 rem には対応していませんので、このままだと古いIEでは全てルートサイズになってしまいます。

なので、フォント指定する時は、

html {
	font-size: 62.5%;
}
p {
	font-size: 14px;
	font-size: 1.4rem;
}

html {

font-size: 62.5%;

}

p {

font-size: 14px;

font-size: 1.4rem;

}

という風に2重に指定します。

こうすれば、まず一旦 14ピクセルに設定された後、 rem対応ブラウザでは remによる設定値で上書きされますが、未対応ブラウザではスルーされるので、

モダンブラウザでは 1.4rem , レガシーなブラウザでは 14px として処理されるわけですね。

ルート要素に 62.5% を指定するのは、ほとんどのブラウザのデフォルトフォントサイズが16ピクセルになっていることを利用した技で、

16 * 0.625 = 10 つまり、ルートサイズを10ピクセルにしてしまうことで、

emをピクセルと同じ感覚で簡単に計算し（出したいピクセル数を10で割るだけ）利用できることからよく利用されているようです。

で、ここからが本題。

古いIEでもrem感覚でっていうと、スクリプトかなんかで古いIEにrem指定に対応させるスクリプトでも書くのかなと思いがちですが、今回はそうではなくて、CSSプリプロセッサを使用します。

（スクリプトはあるのかな？自分は聞いたことないです。ただ何でもかんでもスクリプトで対応してしまうのもサイトが重くなりそうですのでそれもそれで問題ですが…）

予め、こんなかんじの mixin をつくっておきます。

@mixin font-size($s:1.4) {
	font-size:($s * 10) + px;
	font-size:$s + rem;
}

@mixin font-size($s:1.4) {

font-size:($s * 10) + px;

font-size:$s + rem;

}

で、SCSS（SASS）上で、

p {
	@include font-size(1.6);
}

p {

@include font-size(1.6);

}

とかすれば、

p {
	font-size:16px;
	font-size:1.6rem;
}

p {

font-size:16px;

font-size:1.6rem;

}

と展開出来ます。

ピクセル基準で考えて行きたい場合は逆に、

@mixin font-size($s:14) {
	font-size:$s + px;
	font-size:($s / 10) + rem;
}

@mixin font-size($s:14) {

font-size:$s + px;

font-size:($s / 10) + rem;

}

みたいにすれば大丈夫だと思います。