目的
文字サイズの指定などで使用されるremとemは何なのかについてまとめる。
rem
- html要素のfont-sizeを基準にした相対的なサイズの指定単位。
- html要素のfont-sizeが変化すれば自動的にremで指定した各サイズも変更になる。
- ブラウザにより、文字の大きさが変わるために相対的な値で指定する。
- ブラウザや、表示端末の違いを受けにくいなどのメリットがある。
- 1remでhtml要素のfont-sizeと同じサイズになる。
- 2remでhtml要素のfont-sizeの倍のサイズになる。
em
- 親要素のfont-sizeを基準にした相対的なサイズの指定単位。
- 親要素のfont-sizeが変化すれば自動的にemで指定した各サイズも変更になる。
- 単純なデザインのページだとemでもある程度のレスポンシブ対応はできるが、入れ子が乱立すると指定が複雑になってしまう。
- 1remで親要素のfont-sizeと同じサイズになる。
- 2remで親要素のfont-sizeの倍のサイズになる。
remを使いたいけど文字サイズの実感が沸かない。。。
- remを使って文字サイズを指定したいけど1remや2remのサイズはサイズ感に実感が沸かない。
- 1remが10pxとなる設定をすることにより躊躇なくremによるサイズ設定ができるようになる。
- 1remが10pxとなるCSSファイルでの設定方法を下記に記載する。
*/ 下記の設定をCSSファイルの最初に記載する。 /*
html {
font-size: 62.5%;
}