css長度單位
css 長度單位一般我們分為絕對長度單位和相對長度單位
絕對長度單位
絕對長度單位是一個固定的值噪舀，它反應(yīng)一個真實的物理尺寸颅拦。那么臊恋，常見的絕對長度單位有哪些呢逆甜？
-
in虱肄，英寸 -
cm，厘米 -
mm交煞，毫米 -
pt咏窿，points -
pc，Picas
這些單位都是擁有真實的物理尺寸的以及確定的換算關(guān)系素征，比如翰灾，1in = 2.54cm。我們平時在書寫css代碼時稚茅，當然也可以直接使用這些單位，并且也能夠在屏幕上表現(xiàn)平斩。不過由于這些單位都是絕對長度單位亚享，往往不利于頁面屏幕的渲染，這些絕對長度單位更多的使用場景往往是被用在印刷绘面、打印等方向欺税。
相對長度單位
CSS相對長度單位中的相對二字，表明了其長度單位會隨著它的參考值的變化而變化揭璃，不是固定的晚凿。下面是常用的一些相對長度單位:
-
px，Pixels像素 -
em瘦馍，元素的字體高度 -
ex歼秽，x-height，字母x的高度 -
%情组，百分比 -
ch燥筷，字符0的寬度 -
rem箩祥，根元素（html）的font-size -
vw，viewpoint width肆氓，視窗寬度袍祖，1vw=視窗寬度的1% -
vh，viewpoint height谢揪，視窗高度蕉陋，1vh=視窗高度的1% -
vmin，vmax等
今天我們了解幾個我們比較常用而且不容易記得幾個css的單位:
pxemremvwvhvminvmax
px
px像素單位其實是和設(shè)備屏幕的分辨率是直接相關(guān)的拨扶。
在web開發(fā)中凳鬓，像素現(xiàn)在仍然是典型（主流的）度量單位。當然屈雄，你可以在web開發(fā)的過程中采用其他的單位村视，但是往往這些單位在渲染時都被映射換算成像素。是我們最常使用的單位:
header{
width: 100px;
height: 100px;
border: 1px solid #fff;
}
em
em的含義最初是指基于當前字體大寫字母”M”的尺寸酒奶。所以當改變font-size的大小時蚁孔，這個長度單位將會發(fā)生變化。
現(xiàn)代所有的瀏覽器中惋嚎，都會有這樣的一個默認值杠氢，即1em = 16px，所以即使你忘記了設(shè)置font-size也不要緊另伍。
對于em我們需要注意:
基于當前元素的(如果沒設(shè)置就是繼承其父元素的)font-size
<div style="font-size: 12px;">
<span style="font-size: 2em">em單位</span>
</div>
如上代碼中鼻百，span標簽中設(shè)置了font-size: 2em，因為其父標簽設(shè)置了font-size: 12px摆尝，所以span標簽的結(jié)果就是font-size: 24px温艇。
rem
rem單位是相對于字體大小的html元素，也稱為根元素堕汞。
1rem = 根元素(html 節(jié)點)字體大小的倍數(shù)勺爱。根元素（html）的 font-size:16px
html {
font-size: 10px; /* 不建議設(shè)置 font-size: 62.5%; 在 IE 9-11 上有偏差，具體表現(xiàn)為 1rem = 9.93px讯检。 */
}
.sqaure {
width: 5rem; /* 50px */
height: 5rem; /* 50px */
}
注意 中文版的 Chrome 不支持把font-size 設(shè)置到到 12px 以下琐鲁，因此可以考慮給根元素設(shè)置 font-size: 125%。
rem與em的區(qū)別：
rem是相對于根元素（html）的字體大小人灼，而em是相對于其父元素的字體大小
em最多取到小數(shù)點的后三位
<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設(shè)為20px，
body的字體大小設(shè)為1rem投放，那么轉(zhuǎn)換為像素就是28px（20 × 1.4）奈泪，
接著我們又將div的padding設(shè)為1em，由于其基于父元素，所以轉(zhuǎn)換為像素是28px ( 28 × 1）段磨，
然后我們又將span的字體大小設(shè)為1rem取逾，也就是20px，由于其自身設(shè)置了字體大小苹支，所以padding設(shè)為1em砾隅，轉(zhuǎn)換為像素是20px(20 × 1），而不是乘以其父元素的字體大小28px(28 × 1）债蜜。
注意：當元素自身設(shè)置了字體大小晴埂，那么如果它的其他css屬性也使用em單位，則會基于它自身的字體大小寻定。（就像上面例子的span的padding一樣）
基于上面這些原因儒洛，個人更傾向于使用rem，因為em使用不當?shù)脑捓撬伲敵霈F(xiàn)多層繼承時琅锻，會很容易混淆，比如：
<style>
html{ font-size: 20px; }
body{
font-size: 0.9em; /* 18px */
}
div{
font-size: 0.8em; /* 14.4px */
}
span{
font-size: 0.9em; /* 12.96px */
}
</style>
<html>
<body>
<div>
<span></span>
</div>
</body>
</html>
使用em時向胡，如果其祖先元素都是用了em恼蓬，那么就會像上面一樣，body繼
承其父元素html的字體大小僵芹，而div又繼承其父元素body的字體大小
处硬，而span又繼承其父元素div的字體大小，
最終span的字體大小最終是12.96px（20 × 0.9 ×0.8 × 0.9）拇派。
vw荷辕、 vh
vw viewpoint width，視窗寬度件豌，1vw=視窗寬度的1%
vh viewpoint height疮方，視窗高度，1vh=視窗高度的1%
vh等于viewport高度的1/100.例如茧彤，如果瀏覽器的高是900px,1vh求得的值為9px案站。同理，如果顯示窗口寬度為750px,1vw求得的值為7.5px棘街。
做一個占滿高度的或者接近占滿高度的幻燈片，可以用一個非常簡單的方法實現(xiàn)承边，只要用一行CSS：
.cover{
width: 100vw;
height: 100vh;
}
vmin遭殉、vmax
vmin和vmax是相對于視口的高度和寬度兩者之間的最小值或最大值。
如果瀏覽器的高為1100px博助、寬為700px险污，那么1vmin就是7px，1vmax就是11px；如果瀏覽器的高為800px蛔糯，寬為1080px拯腮，那么1vmin也是8px，1vmax也是10.8px蚁飒。
注意： 選擇使用什么字體單位主要由你的項目來決定动壤，如果你的用戶群都使用最新版的瀏覽器，那推薦使用rem淮逻，如果要考慮兼容性琼懊，那就使用px,或者兩者同時使用。當然了,最好根據(jù)實際應(yīng)用來使用相應(yīng)的字體單位
參考博客:
博客來源
W3C
饑人谷
感謝各位所寫的博客作為了參考,也使用了部分代碼來加深印象,如果有侵權(quán),請聯(lián)系刪除,謝謝
