cssのpxとemについて
cssを使ってて、margin,positionなどのプロパティを使っていて値を指定する時に、開発ツールやIDEで補完が効いて、[px],[em],[%]が出てきました。これまでは、基本px,%を使っていたので、今回調べてみようと思います。違いや使い分けなどがわかればと思っています。
これまでのCSSについて調べてみたことに関しては、こちらを参照してください。
cssのプロパティのdisplayについて
cssのプロパティのfloatについて
「px」「em」「%」「rem」に特徴
- px：要素やテキストサイズの絶対的に指定
- em：フォントサイズを基準にサイズを変化させる
- %：親要素に対してサイズを変化させる
例えば親要素の幅が100pxの場合、雇用その幅を50%で指定すると、500pxと同じことになる. - rem：rootの要素を基準にサイズを変化させる
例えば親要素の文字サイズが20pxの場合、雇用その文字サイズを0.5emで指定すると10pxとおなじになる。