前言

說到css的單位，大家應(yīng)該首先想到的是像素單位px并蝗，我們在網(wǎng)頁布局中一般都是用px祭犯，但是近年來自適應(yīng)網(wǎng)頁布局越來越多，em和百分比也經(jīng)常用到了滚停。然后隨著手機(jī)的流行沃粗，web app和hybrid app的開發(fā)，都用到了css3技術(shù)键畴，在css3中最盅，新增了許多單位，rem起惕、vw和vh涡贱、vmin和vmax、ch和ex等等疤祭，那現(xiàn)在對這些單位分別做一下詳細(xì)的介紹吧盼产。

一、CSS單位

CSS 有幾個不同的單位用于表示長度勺馆，一些設(shè)置 CSS 長度的屬性有 width，margin侨核，padding草穆，font-size，border-width 等搓译。長度由一個數(shù)字和單位組成（如 10px悲柱，2em 等），數(shù)字與單位之間不能出現(xiàn)空格些己，如果長度值為 0豌鸡，則可以省略單位嘿般。對于一些 CSS 屬性，長度可以是負(fù)數(shù)涯冠。有兩種類型的長度單位：相對和絕對炉奴。

二、相對長度單位

相對長度單位指定了一個長度相對于另一個長度的屬性蛇更。對于不同的設(shè)備相對長度更適用瞻赶。

【1】em：相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置派任，則相對于瀏覽器的默認(rèn)字體尺寸砸逊。任意瀏覽器的默認(rèn)字體大小都是16px，則2em == 32px掌逛。em的值并不是固定的师逸；em會繼承父級元素的字體大小。

 p {
      font-size: 12px;  /*設(shè)置段落文本屬性*/
      line-height: 2em; /* 行高為24px */
    }

/* 可以看出豆混，一個 em 等于 font-size 的屬性值字旭，
如果設(shè)置font-size: 12px，則line-height：2em就會等于 24px崖叫。
如果設(shè)置 font-size 屬性的單位為 em遗淳，則 em 的值將根據(jù)父元素的 font-size 屬性值來確定。
同理心傀，如果父對象的 font-size 屬性的單位也為 em屈暗，則將依次向上級元素尋找參考的 font-size 屬性值，
如果都沒有定義脂男，則會根據(jù)瀏覽器默認(rèn)字體進(jìn)行換算养叛，默認(rèn)字體一般為 16px。*/

【2】ex：根據(jù)所使用的字體中小寫字母 x 的高度作為參考宰翅。在實(shí)際使用中弃甥，瀏覽器將通過 em 的值除以 2 得到 ex 的值。為什么這樣計(jì)算呢汁讼？因?yàn)?x 高度計(jì)算比較困難淆攻，且小寫 x 的高度值是大寫 x 的一半；另一個影響 ex 單位取值的是字體嘿架，由于不同字體的形狀差異瓶珊，這也導(dǎo)致相同大小的兩段文本，但由于字體設(shè)置不同耸彪，ex 單位的取值也會存在很大的差異伞芹。

【3】ch：數(shù)字 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中較小的那個。如果瀏覽器設(shè)置為1100px寬童漩、700px高弄贿，1vmin會是7px

【8】vmax：vw和vh中較大的那個。如果瀏覽器設(shè)置為1100px寬矫膨、700px高差凹，1vmax會是11px???????

【9】%：百分比也是一個相對單位值。百分比值總是通過另一個值來計(jì)算侧馅，一般參考父對象中相同屬性的值危尿。例如，如果父元素寬度為 500px馁痴，子元素的寬度為 50%谊娇，則子元素的實(shí)際寬度為 250px。

【10】px：像素 (1px = 1/96th of 1in) px單位是根據(jù)屏幕像素點(diǎn)來確定的罗晕。這樣不同的顯示分辨率就會使相同取值的 px 單位所顯示出來的效果截然不同济欢。譬如，Windows的用戶所使用的分辨率一般是96像素/英寸攀例，而MAC的用戶所使用的分辨率一般是72像素/英寸船逮。

三、絕對長度單位

絕對長度單位是一個固定的值粤铭，它反應(yīng)一個真實(shí)的物理尺寸。絕對長度單位視輸出介質(zhì)而定杂靶，不依賴于環(huán)境（顯示器梆惯、分辨率酱鸭、操作系統(tǒng)等）。

【1】cm（centimeter）：厘米

【2】mm（millimeter）：毫米

【3】in（inch）：英寸垛吗， (1in = 96px = 2.54cm)

【4】pt（point）：磅凹髓， 確切的說法是一個專用的印刷單位，大小為1/72英寸怯屉，用于印刷蔚舀。

【5】pc（pica）：派卡，大約 12pt锨络，相當(dāng)于我國新四號鉛字的尺寸

文章每周持續(xù)更新赌躺，可以微信搜索「 前端大集錦 」第一時間閱讀，回復(fù)【視頻】【書籍】領(lǐng)取200G視頻資料和30本PDF書籍資料