CSSの基本 - 相対的な単位

em

emは相対的な長さの最も一般的な単位で、現在の要素のfont-siezeを基準に計算された値です。

短所：カレント要素のフォントサイズは継承されたフォントサイズになる可能性があり、複数のネストした要素に対してフォントサイズを指定すると予期せぬ結果になる可能性があります。

rem

remはroot emの略です。remは現在の要素に対する相対単位ではなく、ルート要素の単位に対する相対単位です。emと比較して、remは複雑さを軽減し、pxとemの両方の長所を兼ね備えています。

"

決めかねているときは、remでフォントサイズ、pxでボーダー、emでその他のプロパティを設定します。

"

ビューポートの相対単位

"

Viewport（ビューポート） - ブラウザウィンドウ内のウェブページの可視部分の境界領域。ブラウザのアドレスバー、ツールバー、ステータスバーは含まれません。

"

• vhビューポートの高さの1/ 001
• vwビューポート幅の1/ 001
• vmin：ビューポートの幅、高校の小さい側の1/001。
• vmax: ビューポートの幅と高さの大きい方の1/001。

単位なし値と線の高さ

いくつかのプロパティは単位なしの値を許します。line-height、z-index、font-weightなどです。

lint-heightは特殊で、その値は単位か単位なしかを選ぶことができます。継承方法は異なります。

• 値が長さとして定義されている場合、子要素はその計算値を継承します。
• 値が単位のない数値の場合、継承されるのは宣言された値、つまり、その計算値は継承された各子要素で再計算されます。

// 値が長さの場合
body{
 font-size: 16px;
 line-height: 1.2em; // 子孫は計算値を継承する.2px
}
.txt {
 font-size: 2em; // 計算値 32px
}
// 値が単位なし数値の場合
body {
 font-size: 16px;
 line-height: 1.2; // 子孫は宣言値を継承する
}
.txt { // line-heightは、その計算値を次のように再計算する。= 38.4px
 font-size: 2m; // 計算値 32px
}