px,em,rem,vw單位在網頁和移動端的應用
px：
是網頁設計中最常用的單位，然而1px到底是多大長，恐怕沒有人能回答上來
它用來表示屏幕設備物理上能顯示的最小的一個點，這個點不是固定寬度的，不同設備上點的長度、比例有可能會不同。
假設：你現在用的顯示器上1px寬=1毫米，但我用的顯示器1px寬=兩毫米，那麽你定義一個div寬度為100px，你顯示器上看這個div是10厘米，我顯示器上看是20厘米。另外一個px點的長度不一定是1:1的正方形，有的設備上長度比是不一樣的。
更多px信息點此博客。 px的兼容性：需要註意的是谷歌瀏覽器最小可以識別12px大小的字體，更多解決方案可以參看文檔
em:
相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸。(引自CSS2.0手冊)
任意瀏覽器的默認字體高都是16px。
所有未經調整的瀏覽器都符合: 1em=16px。此時1.25em=16px*1.25=20px;
如果人為的把body裏面定義font-size:12px; 此刻1em=12px，1.25em=12px*1.25=15px;
如果我們把body設置font-size:62.5%，即16px*62.5%=10px,此時1em=10px,1.25em=12.5px；
這樣更好的有利於我們計算，將原來的px數值除以10，然後換上em單位即可，em可以兼容多瀏覽器
em特征：1、em值並不固定；2、em會繼承父級元素的字體大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font</title>
<style type="text/css">
body{ font-size: 16px;}
div{ font-size: 1.25em;}
div p{ font-size: 1.25em}
</style>
</head>
<body>
<div>
這裏面字體20px;
<p>這裏面的字體大小25px</p>
</div>
</body>
</html>
這裏可以看出em的繼承特性，同樣設置1.25em，div裏的字體按照16px*1.25=20px; p裏面的字體按照20px*1.25=25px;單位一致，顯示不同大小；
這裏是個em的換算工具
rem：
rem是CSS3新增的一個相對單位（root em，根em），這個單位引起了廣泛關註。這個單位與em有什麽區別呢？區別在於使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小，rem的兼容性和em一樣
VW:
vw是可視區寬度單位。1vw等於可視區寬度的百分之一。
100vw=相對於視窗寬度
100vh=相對於視窗高度
vm:相對於視窗的寬度或高度，取決於哪個更小； vmin:vw和vh中較小的那個；vmax:vw和vh中較大的那個
vw單位跟百分比很相似，不同的是vw的值對所有的元素都一樣，與他們父元素或父元素的寬度無關。有點像rem單位那樣總是相對於根元素。
vw的兼容性現代瀏覽器都支持，但古董瀏覽器還是說下
px,em,rem,vw單位在網頁和移動端的應用