font-sizeの指定はremで
文字の大きさ(font-size)の指定には悩ませられますが、
html {
font-size: 62.5%;
}
body {
font-size: 1.6em;
}
と、全体を指定しておいて、個々にサイズを変える箇所は、それぞれの要素やクラスにcss3から採用されたremという単位で指定し直します。
この例では、html要素を62.5%。ブラウザデフォルトのhtml要素のフォントサイズは16pxなので、html要素に1.6emを指定すると、10pxとなります。body要素に1.6emを指定すると16pxとなります。なおbodyに1.6remではなく1.6emとしているのは、chromeのバグ対策です。
h2 {
font-size: 2rem;
}
emは親要素に対する相対指定ですので、親要素に影響を受けますが、remはルート(基本的にはhtml要素)を基準にした相対指定のフォントサイズになります。例えば、親要素が2emのh2要素に2emを指定すると結果は親要素の2倍のフォントサイズになってしましますが、remはルート要素を基準にしますので、意図したとおりのフォントサイズ20pxになります。
remに対応しないブラウザもほとんど無くなりつつあるので、こちらを使用しています。
コメント