em px pt

px

CSSで使う論理上のピクセル

retinaDisplyaが登場してきたので、ハードのピクセル(device pixel)と分ける必要がでてきた

pt

72pt = 1インチ=2.54センチ

em

親要素のフォントサイズの高さを1とした時の倍率

ex

小文字のxの高さを1とした時の倍率

cm,mm

センチ、ミリでのサイズ。
96dpi基準である。

96dpiのスクリーンで72ptは1インチの大きさで表示されるが、

72dpiのスクリーンでは、96/72インチ1≒.3インチの大きさで表示される。

dp

Density-independent Pixel / dip

Androidアプリを作る際に使われる単位。

160dpiのデバイスでの1pxを1dpとする。

vw

Viewport Width。ビューポートの幅に対する1/100の単位

vh

Viewport Height。ビューポートの高さに対する1/100の単位

vmin

Viewport Minimum。ビューポートの幅と高さのうち, 小さい方の値に対する1/100の単位

vmax

Viewport Maximum。ビューポートの幅と高さのうち, 大きい方の値に対する1/100の単位

 

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

 

バイスピクセルCSSピクセルの比率。retinaDisplya iPhone5は2である

 


 

 ピクセルとポイントの関係

 

1インチ = 72pt = 96px

 

f:id:nabe_shodai:20170727230443p:plain 


参考 

https://developer.mozilla.org/ja/docs/Web/CSS/Length

http://parashuto.com/rriver/development/pixel-related-info-for-coping-with-retina-displays

http://phiary.me/css-viewport-units-vw-vh/

https://builder.japan.zdnet.com/html-css/sp_css-firefox-safari/20373825/