自分はhtmlかbody両方へfont-sizeを指定してしまうことが多い。
本当はそれで良いのか ?
html,
body {
font-size: 14px;
}
こういった細かな仕様がわからないので自分はにわかCSSerっぽい
結論
htmlにのみ基本となるfont-sizeは指定する
たとえば単位のremはhtmlを見ている。
Font Size Idea: px at the Root, rem for Components, em for Text Elements
ちなみにサンプルコードみるとdevice-widthを見てルートのfont-sizeを
調整するなど細やかなことやってて感動する。
指定例
htmlに10px指定で、bodyに全体の基本となる14pxをrem指定し、他要素へフォントサイズを継承
見出し等で設定させたい場合はhtmlを基準にrem指定すると良いんじゃないでしょうか。
html {
font-size: 10px;
}
body {
font-size: 1.4rem;
}
.heading {
font-size: 1.6rem;
}
ここでhtml,body共に14px指定してしまうと、あらためてremで計算する際に非常に面倒
疑問
bodyに62.5%する方法が一般的っぽくてちゃんと比較したい。
簡単に em に換算するために、body の font-size を 62.5% に設定
あと海外の記事探るとhtmlへ62.5%やってる例もある。
とりあえず%指定のほうがブラウザやデバイスへの柔軟性、という面で良いっぽい。
気になってコード書いてみたましたが、html,body両方にfont-size指定をすると優先されるのは当然ですがhtmlです
サンプルコード
※ Chrome最新版で確認
そもそも実案件ではIE8対応でremとか使えないとか闇っぽいです