前言
說到css的單位，大家應該首先想到的是像素單位px，我們在網頁布局中一般都是用px，但是近年來自適應網頁布局越來越多，em和百分比也經常用到了。然后隨著手機的流行，web app和hybrid app的開發，都用到了css3技術，在css3中，新增了許多單位，rem、vw和vh、vmin和vmax、ch和ex等等，那現在對這些單位分別做一下詳細的介紹吧。
一、CSS單位
CSS 有幾個不同的單位用于表示長度，一些設置 CSS 長度的屬性有 width，margin，padding，font-size，border-width 等。長度由一個數字和單位組成（如 10px，2em 等），數字與單位之間不能出現空格，如果長度值為 0，則可以省略單位。對于一些 CSS 屬性，長度可以是負數。有兩種類型的長度單位：相對和絕對。
二、相對長度單位
相對長度單位指定了一個長度相對于另一個長度的屬性。對于不同的設備相對長度更適用。
【1】em：相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。任意瀏覽器的默認字體大小都是16px，則2em == 32px。em的值并不是固定的；em會繼承父級元素的字體大小。
p {
font-size: 12px; /*設置段落文本屬性*/
line-height: 2em; /* 行高為24px */
}
/* 可以看出，一個 em 等于 font-size 的屬性值，
如果設置font-size: 12px，則line-height：2em就會等于 24px。
如果設置 font-size 屬性的單位為 em，則 em 的值將根據父元素的 font-size 屬性值來確定。
同理，如果父對象的 font-size 屬性的單位也為 em，則將依次向上級元素尋找參考的 font-size 屬性值，
如果都沒有定義，則會根據瀏覽器默認字體進行換算，默認字體一般為 16px。*/
【2】ex：根據所使用的字體中小寫字母 x 的高度作為參考。在實際使用中，瀏覽器將通過 em 的值除以 2 得到 ex 的值。為什么這樣計算呢？因為 x 高度計算比較困難，且小寫 x 的高度值是大寫 x 的一半；另一個影響 ex 單位取值的是字體，由于不同字體的形狀差異，這也導致相同大小的兩段文本，但由于字體設置不同，ex 單位的取值也會存在很大的差異。
【3】ch：數字 0 的寬度
【4】rem：rem 是根 em（root em）的縮寫，rem作用于非根元素時，相對于根元素字體大小；rem作用于根元素字體大小時，相對于其出初始字體大小。
/* 作用于根元素，相對于原始大小（16px），所以html的font-size為32px*/
html {
font-size: 2rem
}
/* 作用于非根元素，相對于根元素字體大小，所以為64px */
p {
font-size: 2rem
}
【5】vw：viewpoint width，視窗寬度，1vw=視窗寬度的1%。如果瀏覽器的width是900px，1vw求得的值為9px
【6】vh：viewpoint height，視窗高度，1vh=視窗高度的1%。如果瀏覽器的高是900px，1vh求得的值為9px
【7】vmin：vw和vh中較小的那個。如果瀏覽器設置為1100px寬、700px高，1vmin會是7px
【8】vmax：vw和vh中較大的那個。如果瀏覽器設置為1100px寬、700px高，1vmax會是11px???????
【9】%：百分比也是一個相對單位值。百分比值總是通過另一個值來計算，一般參考父對象中相同屬性的值。例如，如果父元素寬度為 500px，子元素的寬度為 50%，則子元素的實際寬度為 250px。
【10】px：像素 (1px = 1/96th of 1in) px單位是根據屏幕像素點來確定的。這樣不同的顯示分辨率就會使相同取值的 px 單位所顯示出來的效果截然不同。譬如，Windows的用戶所使用的分辨率一般是96像素/英寸，而MAC的用戶所使用的分辨率一般是72像素/英寸。
三、絕對長度單位
絕對長度單位是一個固定的值，它反應一個真實的物理尺寸。絕對長度單位視輸出介質而定，不依賴于環境（顯示器、分辨率、操作系統等）。
【1】cm（centimeter）：厘米
【2】mm（millimeter）：毫米
【3】in（inch）：英寸， (1in = 96px = 2.54cm)
【4】pt（point）：磅， 確切的說法是一個專用的印刷單位，大小為1/72英寸，用于印刷。
【5】pc（pica）：派卡，大約 12pt，相當于我國新四號鉛字的尺寸
文章每周持續更新，可以微信搜索「 前端大集錦 」第一時間閱讀，回復【視頻】【書籍】領取200G視頻資料和30本PDF書籍資料
