CSS中有許多設(shè)置長度單位的屬性生蚁，除了經(jīng)常使用的px,em之外噩翠，還有一些不太經(jīng)常使用的，但是作為一個(gè)前端工程師邦投，也是很有必要了解的伤锚。
絕對長度單位
px
px(pixel)其實(shí)應(yīng)該算是我們最熟悉的長度單位了，是相對屏幕分辨率而言尼摹，也是經(jīng)常被作為其他單位的基準(zhǔn)见芹。這個(gè)px和物理設(shè)備的像素是有區(qū)別的，為了保證在不同設(shè)備上視覺效果基本相同蠢涝，px是采用參考像素的,根據(jù)css的規(guī)范上來看玄呛，1px在電腦顯示器上看，大概是1/97英寸長和二。
in
in是inches的簡寫徘铝，在CSS中， 它與px的換算關(guān)系為
1in == 96px
cm
厘米是在現(xiàn)實(shí)生活中惯吕，運(yùn)用的比較廣泛的單位惕它，與px的換算關(guān)系是
1cm == 37.8px
mm
比cm小一個(gè)數(shù)量級，換算關(guān)系為
1mm == 0.1cm == 3.78px
相對長度單位
相對長度單位废登，顧名思義淹魄，它的長度是根據(jù)其他長度計(jì)算出來的。 viewport相關(guān)的單位本來也是屬于這一部分的堡距，但是為了區(qū)別對待甲锡，把它單拎出來了兆蕉。
em
em(font size of the element) 是相對于當(dāng)前元素的字體大小(font-size)屬性值計(jì)算出來。由于瀏覽器默認(rèn)字體大小是16px缤沦，則在默認(rèn)情況下1em = 16px虎韵。如果當(dāng)前元素沒有設(shè)置字體大小就依賴其父元素的大小。如果其父元素的大小也沒有顯式的font-size缸废，則向上尋找直至找到能進(jìn)行計(jì)算的元素包蓝。這個(gè)單位一個(gè)比較常見的使用場景是在中文段落的首段縮進(jìn)兩個(gè)字。即：
p {
text-indent: 2em;
}
建議在設(shè)置字體單位和行距的時(shí)候采用em企量，這樣用戶在縮放網(wǎng)頁的時(shí)候测萎，能保證字體的正常縮放届巩。
rem
rem(font size of the root element)和em有點(diǎn)類似绳泉，不過是相對根元素進(jìn)行計(jì)算的。只要在html元素上指定了其font-size大小姆泻，后面的元素都將使用這個(gè)大小作為基準(zhǔn)進(jìn)行計(jì)算零酪。兼容性方面，目前除了IE8之外拇勃，所有瀏覽器基本都已支持rem了四苇。不過有時(shí)候?yàn)榱思嫒菪裕瑫捎眠@種寫法：
p {
font-size: 16px;
font-size: 1rem;
}
這樣方咆，當(dāng)瀏覽器不支持該屬性的時(shí)候月腋，會自動忽略掉rem設(shè)定的大小。
這個(gè)單位目前也經(jīng)常被用來做屏幕適配瓣赂∮苌В可以利用媒體查詢或者js代碼來動態(tài)設(shè)置根元素的font-size，后續(xù)的元素采用rem單位煌集，這樣就可以保證在不同設(shè)備下的顯示效果妓肢。具體可以參考http://www.alloyteam.com/2016/03/mobile-web-adaptation-tool-rem/。
ex
相對于元素字體的x-height苫纤， 這個(gè)x-height取自字符x的高度的意思碉钠。與em有所區(qū)別的是，當(dāng)你改變字體font-family的時(shí)候卷拘，使用em單位的其大小不會受到影響喊废，而ex會根據(jù)字體重新計(jì)算出新的大小。
ch
與ex單位有點(diǎn)類似栗弟，不過是基于'0'這個(gè)字符字體的寬度污筷，而不是x這個(gè)字符字體的高度進(jìn)行計(jì)算的。
基于viewport視區(qū)的長度單位
視區(qū)（viewport)乍赫，就是瀏覽器可視化的區(qū)域瓣蛀，這個(gè)可視區(qū)域是window.innerWidth/window.innerHeight的大小斤寂。而CSS中，和視區(qū)相關(guān)的單位有四個(gè)揪惦，分別為vw,vh,vmin和vmax。這些單位都依賴屏幕的可視區(qū)域罗侯，因此也可以用于響應(yīng)式排版和布局器腋。
vw/vh
vw是viewport's width的簡寫，表明它的值是根據(jù)視口的寬度計(jì)算而來的钩杰，換算關(guān)系是1vw等于百分之一的window.innerWidth纫塌。與vw類似，vh是根據(jù)視口高度計(jì)算出來的讲弄。
vmin/vmax
這個(gè)單位是根據(jù)視區(qū)中長度偏大的那個(gè)維度值計(jì)算出來的措左，就是如果window.innerHeight > window.innerWidth則vmin取百分之一的window.innerWidth，vmax取百分之一的window.innerHeight計(jì)算避除。
