CSSの単位は数多くあります。

pxだったりremだったり%だったり、、、
これだけ数があるどれを使うのが正しいのかわからなくなってしまいます。

※個人的見解が含まれています。

まずはそれぞれについて知ろう！

px（ピクセル）

サイズを固定する単位です。(絶対値)

em

サイズを相対値指定するものです。
親要素を基準としてサイズが決まります。
ページ内でまだフォントサイズをセットしていなければ、ブラウザーの既定値、たいてい 16px が使われます。
したがって、既定では 1em = 16px であり、2em = 32px です。
body要素のfont-size :20pxでは、1em = 20px で 2em = 40px です。

rem

サイズを相対値指定するものです。
ルート要素(htmlセレクタ)を基準にサイズが決まります。
親要素のサイズの影響を受けることなく相対的な方法でフォントサイズを指定できます。

%

サイズを相対値指定するものです。
親要素を基準としてサイズが決まります。

vw

ビューポートの幅を基準にサイズが決まります。

どれを使えばいいの？

私が思うに一番最適なのは「rem」なのではないかと最近感じています。

理由としては以下の3つです。

1．ブラウザの文字サイズ指定に対応している
2. htmlセレクタに62.5%を指定すれば、直感的にサイズ指定が出来て楽(1rem = 10pxになる)
3. vwと組み合わせることが可能で、リキッドレイアウトに対応させやすい

とはいえ、デザインや仕様に合わせて柔軟に選択していけることが好ましいとは思います。
しかし、特にそれらが厳密に決まっておらずデザインをしっかり再現できるのであればremを使う方向性で良いのかなとも感じています。

世の中に沢山あるサイトを検証ツールを使用して、研究してみるのも面白そうですね。
remやvwなどの組み合わせで良いものがあればぜひ教えてください。

最後まで読んでいただきありがとうございました！
少しでも参考になりましたらURLをコピーしてシェアお願いします！