CSSユニット
CSSは、長さを表現するための、いくつかの異なる単位を有します。
多くのCSSプロパティを取る"length"など、幅、マージン、パディング、フォントサイズ、ボーダー幅、などの値を、
長さは、長さの単位に続く番号など10pxの、2EM、などであります
空白は、数値と単位の間に表示することはできません。 値が0である場合は、ユニットを省略することができます。
いくつかのCSSプロパティの場合は、負の長さが許可されています。
相対および絶対：長さの単位の2種類があります。
ブラウザのサポート
表中の数字は、完全長さの単位をサポートする最初のブラウザのバージョンを指定します。
| 長さ単位 | |||||
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 9.0 * | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | サポートされていません | 19.0 | サポートされていません | 20.0 |
Note: VM：Internet Explorer 9のは、非標準の名前でVMINサポートしています。
相対的な長さ
相対的な長さの単位は、別のlengthプロパティに相対的な長さを指定します。 相対的な長さの単位は、異なるレンダリング媒体との間のより良好なスケール。
| 単位 | 説明 |
|---|---|
| em | 要素のフォントサイズに相対(2em means 2 times the size of the current font) 、それを試してみてください |
| ex | 現在のフォントのxの高さを基準に(rarely used) それを試してみてください |
| ch | 幅に対して"0" (zero) |
| rem | ルート要素のフォントサイズを基準に |
| vw | ビューポートの幅の1％に比べて* それをお試しください |
| vh | ビューポートの高さの1％に比べて* それをお試しください |
| vmin | ビューポートの1％の相対*小さな寸法をお試しください |
| vmax | ビューポートの1％の相対*大きな寸法は、 それを試してみてください |
| % |
Tip:全角とレムユニットは完全にスケーラブルなレイアウトを作成する際に実用的です！
*ビューポートは、ブラウザのウィンドウのサイズを=。 ビューポートが1vw = 0.5センチメートル、50センチメートル広い場合。
絶対長
絶対的な長さの単位は固定されており、これらのいずれかで表現の長さは、まさにそのサイズとして表示されます。
画面サイズがそんなに変わるので、絶対的な長さの単位は、画面上での使用は推奨されていません。 出力媒体は、印刷レイアウトとして、知られている場合は、それらを使用することができます。
| 単位 | 説明 |
|---|---|
| cm | センチはそれを試してみてください |
| mm | ミリはそれを試してみてください |
| in | インチ(1in = 96px = 2.54cm) をお試しください |
| px * | ピクセル(1px = 1/96th of 1in) 、それを試してみてください |
| pt | ポイント(1pt = 1/72 of 1in) それを試してみてください |
| pc | パイカ(1pc = 12 pt) をお試しください |
*ピクセル(px) 、視聴デバイスに関連したものです。 低解像度デバイスの場合、1ピクセルが1デバイスピクセルである(dot)ディスプレイの。 プリンタや高解像度の画面について1ピクセルは、複数のデバイスピクセルを意味します。