NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

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

bell賞味期限切れコンテンツ

この記事は公開または最終更新から1274日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

で、ここからが本題。

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

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

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

 で、SCSS(SASS)上で、

 とかすれば、

 と展開出来ます。

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

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

TAGS

Pingback / Trackback