html font-size: 1px で body font-size: 16rem
ってすると、16rem = 16px ってわかり易くない?っておもったけど、ブラウザの最小フォントサイズが指定されるとくずれるみたい。
62.5% で 10px にして 1.6rem = 16px っていうのがベターな感じですが、
ブラウザの最小フォントサイズを 12px に設定されてると崩れるみたいなので、625% にして 100px にしてから .16rem もありですね。
そもそも、なんで rem で指定したいのか
レスポンシブで、html の基準フォントサイズを変更すると他微調整しなくても、いい感じに全体のバランスキープしたまま調整できるということ?
いや、あらためて考えるとやっぱりボタンとかフォーム周りで、拡大されても文字の大きさに合わせて余白もいい感じにできるというところかなと。なので、グローバルだけでなくて、コンポーネント単位で意識的に padding とか margin も rem で指定していかないとあんまり意味ない。
でも、ついついマージンや余白は px でいっちゃいますよねぇ。あと、rem でやってても、見出しと本文のバランスとか気になってメディアクエリで個別に指定しちゃったり。。