px：絕對單位，頁面按精確像素展示
em：相對單位，基准點為父節點字體的大小，如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。
rem：相對單位，可理解為”root em”, 相對根節點html的字體大小來計算，css3新加屬性，chrome/firefox/IE9+支持。
(另外需注意chrome強制最小字體為12px，即使設置成 10px 最終都會顯示成 12px，當把html的font-size設置成10px,子節點rem的計算還是以12px為基准，所以網上很多文章提到的將html的font-size設為10方便計算不是那么可取)。
html{font-size: 62.5%} /* 16px * 62.5% = 10px */ body{font-size: 1.4rem;} /* 1.4rem * 12px = 16.8px */
本意設置body的字體大小為14px，可是在chrom中實際上卻是16.8px，就是因為10px小於12px，所以采取了12px。
rem與em的區別：
-
rem是相對於根元素（html）的字體大小，而em是相對於其父元素的字體大小
-
em最多取到小數點的后三位
<style> html{ font-size: 20px; } body{ font-size: 1.4rem; /* 1rem = 28px */ padding: 0.7rem; /* 0.7rem = 14px */
} div{ padding: 1em; /* 1em = 28px */
} span{ font-size:1rem; /* 1rem = 20px */ padding: 0.9em; /* 1em = 18px */
}
</style>
<html>
<body>
<div>
<span></span>
</div>
</body>
</html>
在上面的代碼中，我們將根元素（html）的字體大小font-size設為20px，body的字體大小設為1.4rem，那么轉換為像素就是28px（20 × 1.4），接着我們又將div的padding設為1em，由於其基於父元素，所以轉換為像素是28px ( 28 × 1），然后我們又將span的字體大小設為1rem，也就是20px，由於其自身設置了字體大小，所以padding設為1em，轉換為像素是20px(20 × 1），而不是乘以其父元素的字體大小28px(28 × 1）。
注意：當元素自身設置了字體大小，那么如果它的其他css屬性也使用em單位，則會基於它自身的字體大小。（就像上面例子的span的padding一樣）
注：rem與em多在移動端中使用，一般需設置meta縮放比1:1
< meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
但在IOS10 safari 下官方規定了不能禁止用戶縮放，就是說上述標簽是無效的。
暫未找到正確的解決之道，本人采用監聽事件來阻止默認行為，有一定作用，但並不能完全解決。
window.onload = function () { document.addEventListener('gesturestart', function (e) { e.preventDefault(); }); document.addEventListener('dblclick', function (e) { e.preventDefault(); }); document.addEventListener('touchstart', function (event) { if (event.touches.length > 1) { event.preventDefault(); } }); var lastTouchEnd = 0; document.addEventListener('touchend', function (event) { var now = (new Date()).getTime(); if (now - lastTouchEnd <= 300) { event.preventDefault(); } lastTouchEnd = now; }, false); };
vw：viewpoint width，視窗寬度，1vw等於視窗寬度的1%。假如瀏覽器的寬度為200px，那么1vw就等於2px（200px/100）。
vh：viewpoint height，視窗高度，1vh等於視窗高度的1%。假如瀏覽器的高度為500px，那么1vh就等於5px（500px/100）。
vmin：vw和vh中較小的那個。
vmax：vw和vh中較大的那個。
vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome for android39支持
其它的單位還有：
%:百分比
in:寸
cm:厘米
mm:毫米
pt:point，大約1/72寸
pc:pica，大約6pt，1/6寸
ex：取當前作用效果的字體的x的高度，在無法確定x高度的情況下以0.5em計算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需屬性加么有前綴)
ch:以節點所使用字體中的“0”字符為基准，找不到時為0.5em(ie10+,chrome31+,safari7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)