全ての場所で使えるものや、一部のCSS関数内で使える単位など、CSSではとても多くの単位を扱うことができます。 px以外の単位を状況に応じて、使いこなせるようになりましょう。
<percentage>型
widthプロパティやmarginプロパティ、paddingプロパティにおいては、その要素の親要素の幅を基準とした割合となる。<length>型
<length>型
<length>型
<length>型
html { font-size: 62.5%; } /* 10px相当 */
ul { font-size: 0; }
ul > li { font-size: 1.6rem; } /* 16px相当 */このようにフォントサイズを0にして、子要素内はもとに戻す。みたいな事ができる。
<length>型
0の幅。<length>型
絶対的な単位。使わない。
cm: センチメートル 1cm = 10mmmm: ミリメートル 10mm = 1cmq: 四分ミリメートル 1q = (1÷40)cmin: インチ 1in = 2.5cmpt: ポイント 1pt = 1/72in = 0.3528mmpc: パイカ 1pc = 12ptmozmm: ディスプレイ解像度によらず、正確に 1 ミリメートルを描画しようとするらしい。mozmmはFirefoxの実験的な実装だが、なぜかSafariも対応している。
<length>型
vw: ビューポートの幅に対する割合の単位vh: ビューポートの高さ対する割合の単位<length>型
vwとvhに関連するものとして、vminとvmaxが存在するvmin: ビューポートの幅と高さのうち、値が小さい方に対する割合vmax: ビューポートの幅と高さのうち、値が大きい方に対する割合vminをvmとして定義していたが、いまはvminになっている。例えば画面幅が320pxであれば、100vwは320px、10vwは32pxとなる。
widthプロパティのパーセンテージは、親要素（その要素を包括する要素）の幅を基準にした割合なので、かならずしもビューポート＝親要素の幅ではありません。vwやvhを使うと幸せになるでしょう。しかし、Chrome 38ではメディアクエリの式の中ではvw、vhが使えない。困る。
<angle>型
deg: 度。1周は360度。grad: gradian（グラジアン）円の全周は 400 gradian。rad: ラジアン。 円の全周は 2π ラジアン。turn: 回転数（ turn ）。 円の全周は 1 回転。<time>型
s: 秒。100sは100秒ms: ミリ秒。100msは100ミリ秒0sとなり、transition-duration: 0;とした場合、Firefoxにおいては厳密に評価し、無効な値となり、機能しません。ほかブラウザでは機能することもありますが、めんどくさくてもsをつけましょう。<frequency>型
Hz: ヘルツ単位の周波数を表す。例： 0Hz、1500Hz、10000HzkHz: キロヘルツ単位の周波数を表す。例： 0kHz、1.5kHz、10kHzhttps://developer.mozilla.org/ja/docs/Web/CSS/frequency
Operaがバージョンによっては pichプロパティ で使えるらしい。でも今は...Blin(ry
<resolution>型
dpi: 1インチあたりのドット数。1インチは 2.54 cm なので、1dpi ≈ 2.54dpcm です。dpcm: センチメートルあたりのドット数 を表します。1インチは 2.54 cm なので、 1dpcm ≈ 0.39dpi です。dppx: ピクセル（px）あたりのドット数を表します。CSS の inch と CSS の px の比率は 1.96 で固定なので、1dppx は 96dpi と同じです。