CSSで使う単位

単位の種類

%, em, rem, vw, vh, vmin, vmax

現状使われるほぼ唯一の絶対単位

Webブラウザのfont-size初期値＝ 16px

width: 親要素のwidthに対する%
font-size: 親要素のfont-sizeに対する%
transformプロパティのtranslate値（translateX, translateY, translate）:その要素自身の大きさに対しての%

親要素のフォントサイズを1とする単位

初期値では1em = 16px

pxには効かないブラウザーのフォントサイズ変更設定が効きますが、サイズの基準が親要素なのでややこしくなりがちです。

rootのフォントサイズを1とする単位

rootとは、html要素のこと
初期値では1rem = 16px

remは、emでは親要素が基準でややこしいということで登場した単位。

1rem = 16px ということは、例えば文字サイズが20pxでデザインしている場合には、CSSで1.25remと指定する必要があります。つまりいちいち計算しなくてはならず、pxのように直感的ではありません。

そこで出た解決策がhtml要素に対して下記を設定する方法です。

html {
    font-size: 62.5%;
}

これを設定することで、1rem = 10pxとなるので、直感的にサイズがわかりやすくなるメリットがあります。
ただし、それではpxで設定するのと大差ないほか、レスポンシブデザインで一括変更しやすいというメリットも減ってしまいます。

remを使う/使わない、62.5%対応する/しないなど、どちらがいいか考えて使用しましょう。

100vwで画面の横幅いっぱいになる。100vhで画面の縦いっぱいとなる。ただし、vhはアドレスバーなどは含まないので、スクロールによってアドレスバーの表示・非表示が切り替わると大きさが変わってしまいます。

font-sizeに使用すると、画面サイズに合わせてシームレスに拡大・縮小するように設定できます。画面サイズが大きくなると文字が大きくなりすぎるので気をつけましょう。

一つ上のvwでは、画面が横に広くなると、例えば文字の大きさなどがその分だけどんどん大きくなってしまいます。

vminでは、スマホサイズでは画面の横幅基準のサイズですが、画面の横幅が縦幅以上になると縦幅を基準としたサイズに切り替わるため、文字が大きくなりすぎるのを防げるなど、より実用的です。