css 單位和值
一、絕對長度單位
常用的絕對長度單位：
- px pixel 是 CSS 中最常用的長度單位，可以用來指定字體大小，元素的寬度、高度、邊框、內(nèi)邊距，外邊距的大小等等, 它是一個虛擬長度單位，是計(jì)算機(jī)系統(tǒng)的數(shù)字化圖像長度單位，
- pt point，是一個標(biāo)準(zhǔn)的長度單位，1pt ＝ 1/72 英寸，用于印刷業(yè)，非常簡單易用，
- in 表示英寸，是一個物理單位，在 CSS 中被直接映射成為 px;
- cm 表示厘米，在生活中常用的單位，同樣被映射為 px;
- mm 表示毫米，與 cm 類似;
其中，如果 px 要換算成物理長度，需要指定精度 DPI，px = pt * 72 / DPI
ppi 和 dpi
dpi 最初用于衡量打印物上每英寸的點(diǎn)數(shù)密度。DPI 值越小圖片越不精細(xì)。當(dāng) DPI 的概念用在計(jì)算機(jī)屏幕上時(shí)，就應(yīng)稱之為 ppi。同理： PPI 就是計(jì)算機(jī)屏幕上每英寸可以顯示的像素點(diǎn)的數(shù)量。因此，在電子屏幕顯示中提到的 ppi 和 dpi 是一樣的，ppi 是指屏幕上的像素密度，
- 其計(jì)算方法為： ppi= 屏幕對角線上的像素點(diǎn)數(shù)/對角線長度 = √ （屏幕橫向像素點(diǎn)^2 + 屏幕縱向像素點(diǎn)^2）/對角線長度，
- 以小米 2s 為例，該屏幕分辨率為 720px*1280px，4.3 英寸。則點(diǎn)密度為 √ (720^2 +1280^2) /4.3 = 342ppi
所以在小米 2s 上
1px = 1pt * 72/342 = 0.21pt
1pt = 1px *342/72 = 4.75px
也就是說在在小米2s上一個點(diǎn)大概是4.75px
二、百分比長度單位
相對長度單位相對于其他一些東西，比如父元素的字體大小，或者視圖端口的大小。使用相對單位的好處是，經(jīng)過一些仔細(xì)的規(guī)劃，您可以使文本或其他元素的大小與頁面上的其他內(nèi)容相對應(yīng)。下表列出了 web 開發(fā)中一些最有用的單位.
- em 在 font-size 中使用是相對于父元素的字體大小，在其他屬性中使用是相對于自身的字體大小
- rem 根元素的字體大小
- vw 視窗寬度的 1%
- vh 視窗高度的 1%
em 被定義為相對于當(dāng)前對象內(nèi)文本的字體大小：
如果父元素的字體大小為 16px，則所有直接子元素中的 1em 值將計(jì)算為 16px?；诨締卧闹R，可以很方便的增大或減小子元素的字體大小。 這里的值不需要是整數(shù)
使用 em 可以輕松地將各種元素的字體大小保持在固定比例,
另外有一點(diǎn)需要注意：如果想要通過 em 設(shè)置當(dāng)前元素的大小值，并且不是相對于直接父元素，而是相對父元素的父元素或者根元素，就會變得很復(fù)雜，因?yàn)槊恳粚佣家M(jìn)行計(jì)算
<div class="parent">
<div class="child1">
<div class="child2"></div>
</div>
</div>
.parent {
font-size: 20px;
}
.child1 {
font-size: 1.5em;
}
.child2 {
font-size: 1.2em;
}
那么就需要經(jīng)過計(jì)算: child1 的字體大小為 20 x 1.5 = 30px , 而 child2 的字體大小就等于 20 x 1.5 x 1.2 = 36px
rem 也是一個相對單位，與 em 的不同點(diǎn)在于 rem 的長度總是相對于根元素, 而不是像 em 使用級聯(lián)的方式來計(jì)算尺寸。這種單位使用起來就簡單很多
同樣是上面的例子，不過使用的單位是 rem
<div class="parent">
<div class="child1">
<div class="child2"></div>
</div>
</div>
.parent {
font-size: 20px;
}
.child1 {
font-size: 1.5rem;
}
.child2 {
font-size: 1.2rem;
}
vh and vw
響應(yīng)式 web 設(shè)計(jì)離不開百分比。但是，CSS 百分比并不是所有的問題的最佳解決方案。CSS 的寬度是相對于包含它的最近的父元素的寬度的。但是如果你就想用視口（viewpoint）的寬度或者高度，而不是父元素的，那該腫么辦？這就是 vh 和 vw 單位為我們提供的。
1vh 等于 1/100 的視口高度。栗子：瀏覽器高度 900px, 1 vh = 900px/100 = 9 px。同理，如果視口寬度未 750， 1vw = 750px/100 = 7.5 px。
可以想象到的，他們有很多很多的用途。比如，我們用很簡單的方法只用一行 CSS 代碼就實(shí)現(xiàn)同屏幕等高的框。
相關(guān)文章
八一八那些 px、pt、ppi、dpi、dp、sp 之間的關(guān)系
CSS 的值與單位
7 個你可能不認(rèn)識的 CSS 單位
