hamayuzinの日記

ITベンチャーに新卒入社し、エンジニアとかデータサイエンティスト、とかやってます。あの時 あれやってたな的な備忘録にできれば。

【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%に相当する

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