【0からやり直すフロント/html/css】% em rem vh vw の違いと使い所

cssのフォントサイズ指定問題 レスポンシブとかでいろいろある

%

まんま　親要素のなん％やねん

html{
  font-size: 100%;
  /* 16px */
}

div {
  font-size: 100%;
  /* 16px */
}

div > a {
    font-size: 50%;
  /* 8px */
}

em

親要素の何倍か フォントサイズ以外の指定にはいいのかな

html{
  font-size: 100%;
  /* 16px */
}

div {
  font-size: 1em;
  /* 16px */
}

div > a {
    font-size: 0.5em;
  /* 8px */
}

rem

ルート(html)に対する割合のサイズ

入れ子のときとかに辛くなるemと異なり 常にhtmlのフォントサイズを意識すればいい フォントサイズの指定に向いている

html{
  font-size: 100%;
  /* 16px */
}

div {
  font-size: 0.5rem;
  /* 8px */
}

div > a {
    font-size: 0.5rem;
  /* 8px */
}

vw vh

• Viewport Height（vh）：viewportの高さ。1vh=viewportの高さの1%
• Viewport Width（vw）：viewportの幅。1vw=viewportの幅の1%に相当する

画面サイズの指定等で使える 画面一杯に拡大とか