長さの指定方法

相対単位 (Relative length units)

フォント基準
単位 大きさ 適用例
em 1emは、フォントサイズと等しい 1em
ex 1exは、フォントの'x'の高さと等しい 1ex
ビューポート基準
単位 大きさ 適用例
vh 1vhは、ビューポートの高さの1% 1vh
vw 1vwは、ビューポートの幅の1% 1vw
vmin vhまたはvwの、小さい方に等しい 1vmin
vmax vhまたはvwの、大きい方に等しい 1vmax
5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units - CSS Values and Units Module Level 3

このうちビューポート基準の単位は、CSS3に対応する一部のブラウザでのみサポートされます。Browser compatibility - <length> - CSS | MDN

絶対単位 (Absolute length units)

単位 意味 大きさ 適用例
px ピクセル サイズはデバイスに依存 1px
mm ミリメートル 1mmは、1mm 1mm
cm センチメートル 1cmは、10mm 1cm
in インチ 1inは、2.54cm 1in
pt ポイント 1ptは、1/72in 1pt
pc パイカ 1pcは、12pt 1pc

実際の表示サイズはページのズームレベルに影響されるため、ディスプレイ上で指定サイズになるとは限りません。

単位換算表
  mm cm in pt pc
1mm 1.00 mm 0.10 cm 0.04 in 2.83 pt 0.24 pc
1cm 10.00 mm 1.00 cm 0.39 in 28.35 pt 2.36 pc
1in 25.40 mm 2.54 cm 1.00 in 72.00 pt 6.00 pc
1pt 0.35 mm 0.04 cm 0.01 in 1.00 pt 0.08 pc
1pc 4.23 mm 0.42 cm 0.17 in 12.00 pt 1.00 pc

ピクセル (pixel)

ピクセルには、

  • デバイスピクセル (device pixel) … ハードウェアの実際のピクセル
  • CSSピクセル (CSS pixel) … 理論上のピクセル

の2種類があります。jQuery×HTML5×CSS3を真面目に勉強(4):WebページをRetina対応させるテクニック~基礎知識編 (1/2) - @IT 山田直樹 (2013/08/29)

デバイスピクセル比 (device pixel ratio)

CSSピクセルとデバイスピクセルの比をデバイスピクセル比と呼称し、1つのCSSピクセルにデバイスピクセルがいくつ割り当てられるかを表します。

ブラウザによってはデバイスピクセル比を、JavaScriptのWindow.devicePixelRatioで取得できます。Window.devicePixelRatio - Web APIs | MDN

このデバイスピクセル比を得られれば、それからデバイスピクセルを求められます。たとえば次のようにすれば、つねにフォントを10pxに設定できます。

element.style.fontSize = ( 10 / window.devicePixelRatio ) + 'px'

割合 (percentage)

「%」で、親要素の大きさに対する割合で指定します。percentage - CSS | MDN

コード 適用例
<div style="width: 100px">
    <div style="width: 50%"></div>
</div>
<div style="width: 100px">
  <div style="width: 25%"></div>
</div>
<div style="width: 100px">
  <div style="width: 25%">
    <div style="width: 50%"></div>
  </div>
</div>