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