CSSユニットガイド:CSS em、rem、vh、vwなど、説明

単位

多くのCSSプロパティが好きwidthmarginpaddingfont-size長さを取るなど。CSSには、長さを複数の単位で表す方法があります。長さは、空白のない数値と単位の組み合わせです。例えば5px0.9emなど

長さ

一般的な長さの単位

CSSが長さを表すために使用する単位はいくつかあります。すべてのブラウザでサポートされている古いものは次のとおりです。

  • rem-「r」は「root」を表します:「rootem」-これは、ルート要素に固定されたフォントサイズと同じです(ほとんどの場合)。
  • vhおよびvw-多くのレスポンシブWebデザイン手法は、パーセンテージルールに大きく依存しています。ただし、CSSのパーセンテージ測定は、すべての問題に対して常に最良の解決策であるとは限りません。メジャーvhは、ビューポートの高さの1/100に等しくなります。したがって、たとえば、ブラウザの高さが800pxの場合、1vhは8pxに等しく、同様に、ビューポートの幅が650pxの場合、1vwは6.5pxに相当します。
  • vminおよびvmax-これらの単位は、 vhおよびvwの最大値または最小値に関連しています。たとえば、ブラウザが幅1200ピクセル、高さ600ピクセルに設定されている場合、1vminは6ピクセル、1vmaxは12ピクセルになります。ただし、幅が700pxに設定され、高さが1080pxに設定されている場合、vminは7px、vmaxは10.8pxになります。
  • exおよびch-これらの単位は、 emおよびremと同様に、現在のフォントとフォントサイズに依存します。ただし、 emremとは異なり、これらの単位もfont-family、各フォントに固有のメジャーに基づいて決定されるため、依存しています。CHユニット(「文字単位」)は文字ゼロ(「0」)の幅として定義されます。EXユニット「は現在のフォントの現在のx高さ又は1EMの半分」と定義されます。特定のフォントのheight-xは、そのフォントの小文字の「x」の高さです。多くの場合、フォントの中間マークです。

CSSで長さとサイズに使用される単位には、相対と絶対の2種類があります。

相対単位

相対単位は、要素の現在のフォントサイズまたはその他の設定に関連して変化します。いくつかの相対的な単位は

em

  • font-size現在の要素の大文字のMの幅。
  • フォントサイズは親要素から継承されます。

例:

div { font-size: 16px; } div h3 { font-size: 2rem; }

ここに

現在の要素または親要素のはである32pxため、は等しくなります。font-size16px

rem

  • ルートem、またはデフォルトの基数の大文字Mの幅font-size
  • 親フォントサイズは効果がありません。

例:

body { font-size: 16px; } p { font-size: 1.5rem; }

ここに

24pxデフォルトの基数font-size16px。なので、等しくなります。

%

  • 親のサイズに対するパーセントサイズ。

例:

div { width: 400px; } div p { width: 75%; }

親の幅は400pxであるため、内側の部分の幅は、、300pxつまりの75%になり400pxます。

vw

  • ビュー幅、またはビューポートの幅の100分の1

例:

body { width: 100vw; }

body充填417pxであるか否か、ビューポートの幅は、690px、または任意の幅。

vh

  • ビューの高さ、またはビューポートの高さの100分の1

例:

div { height: 50vh; }

これdivにより、ビューポートの高さの半分が、1080px、1300px、または任意の高さになります。

絶対単位

画面サイズやその他の設定に関係なく、絶対単位は同じになります。いくつかの絶対単位は

px

  • ピクセル
  • ピクセル数は、表示デバイスの画面の品質に関連しています

incmmm

  • インチ、センチメートル、ミリメートル
  • インチは、小さな画面または大きな画面のインチです

ptpc

  • ポイント(1/72インチ)とパイカ(12ポイント)

p { font-size: 24px; } div { width: 3in; border-width: 3pt; }

の段落はfont-size: 24px、電話、タブレット、またはデスクトップ画面に24pxとして表示されます。

divワイド3インチとして表示されます、そしてborder上はdiv厚いにかかわらず、画面サイズのインチの72分の3になります。