cssのフォントサイズで使われるem/remについてまとめてみました
ほぼ備忘用ですがもし参考になれば。
読み方
em : エム
rem : レム
どんな単位？
相対的な基準を持つ単位
emは親要素の font-size を1とする
remはルート要素（html 要素）の font-size を1とする
pxとの違いは？
pxはディスプレイの画素「ピクセル」を 1 とする絶対値による単位
つまり絶対値か相対値かの違い
相対的な単位は何がいいのか？
ブラウザの文字調節機能で文字サイズを変更しているユーザがいた際に、webサイトの文字比率を一定に保つことができる
つまりウェブアクセシビリティを考慮したデザインを実現できる
em/remの違いは？
emは親要素の font-size を1とするため、同じ単位を入れたとしても親要素のフォントサイズが変更されていた場合、そのフォントサイズが単位となる
以下例
See the Pen
Confirm em rem fontstyle by Seiya Takahashi (@takasei)
on CodePen.
同じ2という単位を設定しているが、それぞれの親要素のdivタグでfont-size:32px;を設定することで、remはhtml要素のフォントサイズ16px=1remだが、emの方はdiv親要素のフォントサイズ32px=1emとなっていることで、最終的なフォントサイズが異なる
参考にしたとてもわかりやすかったサイト
remを使ってCSSの文字サイズ指定
https://www.pc-koubou.jp/magazine/23912#section03
「font-sizeの指定はpxとremどちらを使うべきか？」問題に対する回答
https://zenn.dev/tak_dcxi/articles/26280e7607bcd2
コメント