CSS単位変換
px / rem / em / vw / % を相互変換
基準値設定
px
px
px
変換結果
px
16
rem
1
em
1
vw
0.833
%
100
カードをクリックでコピー
clamp() 生成
レスポンシブな可変サイズを生成
px
vw
px
clamp(0.875rem, 2vw, 1.5rem)
rem / em の違い
rem: ルート要素（html）のfont-sizeを基準
em: 親要素のfont-sizeを基準
remは予測しやすく、emはコンポーネント内で相対的なサイズ調整に便利
vw / % の違い
vw: ビューポート幅の1%
%: 親要素のサイズを基準
vwはレスポンシブな文字サイズに、%はレイアウト幅に使用