CSSで寸法を決める単位

ぜったいたんい

cm、mm、in、pt、pxなど.
px以外の単位は物理世界で意味がある
pxは主にディスプレイ上の絶対寸法決定単位に用いられる

px

ディスプレイ上の画面表示の最小単位
一つの問題は、容器のサイズが変化しても内容のサイズは変わらないということです.

相対単位

Em、rem、vw、vh、vmin、vmax、%、ex、ch、lhなど
しかし、その中でよく見られる単位はem、rem、vw、vh、%です!

em : relative to parent element

フォントサイズを表す単位
選択したフォント(フォント)に関係なく、常に固定値(1 em=16 px)
Emは親フォントサイズに対して計算されますHTML

<div class="parent">
  Parent
     <div class="child">Child</div>
</div>

CSS

.parent {
 font-size: 8em;
}

.child {
 font-size: 0.5em;
}

デフォルトでは、ブラウザがhtmlに割り当てるfont sizeは16 pxです.
(htmlまたはbodyにfont sizeを指定しない限り、16 pxに固定されます)

例えば、上のコードブロック.
ここで、Parentに適用される8 emはhtmlに適用されるサイズが16 px*8であり、pxとして計算される値が128 pxであることを示す
Parentに適用されるChildのサイズは、親Parentのpx値128 px*0.5の64 pxにも適用されます.

パーセント

親要素の相対サイズをemと同じ単位で計算
(8 em=800%、0.5 em=50%同じ)

rem : relative to root element

remではrはrootを表す
親を計算するemとは異なり、remは常にルートの相対値を計算します.

たとえば、上のコードブロックです.
Parentに適用される8 remは、ルートhtmlに適用されるサイズ16 px*8を表し、pxとして計算される値は128 pxである
Parentに適用されるChildのサイズも、親でないhtmlの16 px*0.5に適用される8 pxの値を有します.

vw : viewport width

親要素を考慮せずに、ブラウザの幅に基づいて長さを決定します.
100 vwの場合、ブラウザ幅の100%が使用されることを示します.

vh : viewport height

親要素を考慮せずにブラウザの高さに基づいて長さを決定
50 vhの場合、ブラウザの高さの50%が使用されることを示します.

vmin : viewport minimum

親要素を考慮せずに、ブラウザの幅と高さに小さい値を持つ単位を選択します.
50 vmin、長さが幅より小さい場合は高さの50%を表します.

vmax : viewport maximum

親要素を考慮せずに、ブラウザの幅と高さでより大きな値を持つ単位を選択します.
50 vmax、幅が高さより大きい場合は幅の50%が使用されます.

異なるCSSレベルで適切な方法を使用する方法

前の記事で述べたように、主に使用するCSSサイズの単位はem、rem、vw、vh、%などで、どのような場合に使用されるかを具体的に紹介します.

(1)親要素に対して計算するかどうか

親要素に基づいて計算します。

%

em

ブラウザ画面から親要素を計算

vw,vh

rem

(2)要素の一部によって寸法が変わるか

寸法は要素の幅、高さによって変化します。

%

vw,vh

フォントサイズに応じてサイズを変更します。

em

rem

Emとrem?
私のコンポーネントがページ上の任意の場所で固定サイズで使用されている場合、rem、
どこで使うかによってサイズが変わる場合は、emを使ってください!

参考資料

DREAM符号化Elly Responsive CSSデバイス
DREAMコードElliemとrem