| 単位 | 大きさ | 適用例 |
|---|---|---|
| em | 1emは、その要素のフォントサイズと等しい | 1em |
| ex | 1exは、その要素のフォントの'x'の高さと等しい | 1ex |
| ch | 1chは、その要素のフォントの'0'の幅と等しい | 1ch |
| rem | 1remは、ルート要素のフォントサイズと等しい | 1rem |
| 単位 | 大きさ | 適用例 |
|---|---|---|
| vh | 1vhは、ビューポートの高さの1% | 1vh |
| vw | 1vwは、ビューポートの幅の1% | 1vw |
| vmin | vhまたはvwの、小さい方に等しい | 1vmin |
| vmax | vhまたはvwの、大きい方に等しい | 1vmax |
このうちビューポート基準の単位は、CSS3に対応する一部のブラウザでのみサポートされます。Browser compatibility - <length> - CSS | MDN
| 単位 | 意味 | 大きさ | 適用例 |
|---|---|---|---|
| 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 |
実際の表示サイズはページのズームレベルに影響されるため、ディスプレイ上で指定サイズになるとは限りません。
ピクセルには、
の2種類があります。jQuery×HTML5×CSS3を真面目に勉強（4）：WebページをRetina対応させるテクニック～基礎知識編 (1/2) - ＠IT 山田直樹 (2013/08/29)
CSSピクセルとデバイスピクセルの比をデバイスピクセル比と呼称し、1つのCSSピクセルにデバイスピクセルがいくつ割り当てられるかを表します。
ブラウザによってはデバイスピクセル比を、JavaScriptのWindow.devicePixelRatioで取得できます。Window.devicePixelRatio - Web APIs | MDN
このデバイスピクセル比を得られれば、それからデバイスピクセルを求められます。たとえば次のようにすれば、つねにフォントを10pxに設定できます。
element.style.fontSize = ( 10 / window.devicePixelRatio ) + 'px'
「%」で、親要素の大きさに対する割合で指定します。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>
|
|