Milk+ea

Weblog Is My Hobby.

CSS3のremを使う

rem?

CSS3ではremという単位が使えて、サイズを指定する時にrootに設定されているfont-sizeを基準に考えることができます。

<html style="font-size: 16px;">
  <body style="font-size: 10px;">
    <div style="font-size: 1rem;"></div> // ← font-size: 16px;
  </body>
</html>

rootというのは、font-sizeが設定されている一番最初の親要素のよう。
上のhtmlではfont-sizeが設定されている最初の親要素は<html>で、<div>に設定されているフォントサイズは1remなので<html>と同じ16( x 1)pxという事になります。

このremについてググると「rootサイズには62.5%がオススメ」と出てきます。
それは62.5%という値は10pxと同じで、remで16pxとか指定するには1.6remと分かりやすいからなのです。

<html style="font-size: 62.5%;">
  <body sytle="font-size: 1.6rem;">        // ← font-size: 16px;
    <div style="font-size: 1.6rem;"></div> // ← font-size: 16px;
  </body>
</html>

思う

レスポンシブサイトや文字の大きさを変えれるサイト([小][中][大]みたいな)じゃないなら使っても使わなくても同じだと思う。(どっちにしろIE8以下は使えないけど)
こっちでもマル。

<body sytle="font-size: 16px;">        // ← font-size: 16px;
  <div style="font-size: 1em;"></div> // ← font-size: 16px;
</body>

どっちにしろ開発ツールでちまちま設定するんだよぉぉ。

レスポンシブとかならrootサイズを変えればremで設定されてる所も相対的に変わってくれるので確かに楽だ!(作ったことないから想像)

新しいのって好きなので今は、入れ物になる要素がremで中身はemみたいにして遊びながら使ってみてる。

<article style="font-size: 1.6rem">
  <h1 class="title" style="font-size: 2em;"></h1>
  <h2 class="sub-title" style="font-size: 1.3em;"></h2>
</article>

こんな感じ。
レスポンシブってサイズ調整みたいなのってあるんですかね?よくわからーん