remはhtmlタグのフォントサイズに依存するので、単純また、画面サイズごとのテキストサイズの管理が楽になります。
フォントサイズの比較
| 絶対的な単位 | px |
| 相対的な単位 – 親要素に依存 | % |
| 相対的な単位 – 親要素に依存 | em |
| 相対的な単位 – htmlタグに依存 | rem |
各単位で16pxを指定する。
px
16pxは16px
%
100%かつ親要素が16px
em
1emかつ親要素が16px
rem
1remかつhtmlタグが16px or 100%
htmlタグのみに依存するremは、画面サイズごとにhtmlタグを変更することで、remの単位を使った全てに影響させることができるので、テキストサイズの管理が楽になります。
テキスト管理を単純化させるルール
htmlタグに font-size: 62.5%を設定すると、1rem = 約10pxとして扱うことができます。
| 1rem | 約10px |
| 1.5rem | 約15px |
| 2rem | 約20px |
こうすることで、単純な形に変換することができます。
画面サイズ変更時のテキストサイズの変更
htmlタグのfont-size: 〇〇%を変更すると一括してサイズ変更ができます。
メディアクエリで画面サイズ毎にバランス調整できます。
※逆に一括してサイズ変更してしまうので、remを多用すると、バランスが悪くなる場合もあります。
| % | 1rem |
| 100% | 16px |
| 87.5% | 14px |
| 75% | 12px |
| 62.5% | 10px |
| 50% | 8px |
以上テキストサイズはremを使ったほうがいいでした。
