css 單位

css 尺寸單位

絕對長度

絕對長度單位是一個固定的值，它反應一個真實的物理尺寸。絕對長度單位視輸出介質而定，不依賴於環境（顯示器、分辨率、操做系統等）。

px（pixel）像素，絕對單位，px是相對顯示器屏幕分辨率而言的，(1px = 1/96th of 1in)。

pt(point)磅，是印刷行業經常使用單位，(1pt = 1/72in) 等於1/72英寸，它是天然界標準的長度單位，也稱爲「絕對長度」。

pc（pica）,派卡，大約6pt，1/6寸，(1pc = 12 pt)。

in, 英寸，(1in = 96px = 2.54cm)。

cm，釐米。

mm，毫米。

相對長度

相對長度單位指定了一個長度相對於另外一個長度的屬性。對於不一樣的設備相對長度更適用。

em是相對單位，它不是一個具體的數值，是基準點爲父節點字體的大小，即%，在css中，1em = 100%，它是一個比率，結合css繼承關係使用。若是自身定義了font-size按自身來算，默認瀏覽器字體爲16px，整個頁面的1em都不同，由於它會繼承父級的字體大小（移動端佈局使用比較合適）。在 CSS 中，em 是很是有用的單位，由於它能夠自動適應用戶所使用的字體。

rem,css3中新增的一個相對單位，相對於根元素（html）字體大小來計算，可謂 root em（瀏覽器IE9+）。這個單位集絕對單位和相對單位的優勢於一身，經過它能夠只設置根元素就成比例地調整全部字體大小，又可避免字體大小逐層複合的連鎖反應。若是要兼容(IE6-8),同時使用px設置字體就行。

vw(viewpoint width)視窗寬度，1vw等於視窗寬度的1%。

vh(viewpoint height)視窗高度，1vh等於視窗高度1%。

vmin,vw和vh中較小的那個。

vmax,vw和vh較大的那個。

ex，取當前做用效果的字體x的高度（x-height），在不肯定x高度的狀況下以0.5em計算（IE11及如下不支持），x-height一般是字體尺寸的一半。

ch,一般是數字「0」的寬度，找不到時爲0.5em(IE10+)。

%，百分比。

注意！！！：

chrome不支持中文字體小於12px，因此會致使當計算小於12px的時候，會默認取12px去計算，致使中文版chrome的rem計算不許確。

使用em時，全部未經調整的的瀏覽器都符合：1em = 16px, 12px = 0.75em, 10px = 0.625em,爲了簡化font-size的計算，須要在css中body元素中聲明 font-size=62.5%，這就使 em的值爲16*0.625 = 10px，這樣將你的原來的px數值除以10，而後換上em做爲單位，從新計算那些被放大的字體的em數值。避免字體大小的重複聲明。

 

css 顏色單位

直接寫顏色名，如紅色（color:red）。

rgb(x,x,x)， RGB 值 (好比 rgb(255,0,0))。rgb(%,%,%), RGB 百分比值 (好比 rgb(100%,0%,0%))。每一個參數 (red、green 以及 blue) 定義顏色的強度，能夠是介於 0 與 255 之間的整數，或者是百分比值（從 0% 到 100%）。

rgba(ed, green, blue, alpha), alpha 參數是介於 0.0（徹底透明）與 1.0（徹底不透明）的數字。

hsl(hue, saturation, lightness)，hsl指的是 hue（色調）、saturation（飽和度）、lightness（亮度） - 表示顏色柱面座標表示法。Hue 是色盤上的度數（從 0 到 360） - 0 (或 360) 是紅色，120 是綠色，240 是藍色。Saturation 是百分比值；0% 意味着灰色，而 100% 是全綵。Lightness 一樣是百分比值；0% 是黑色，100% 是白色。

hsla(hue, saturation, lightness, alpha), hsla顏色值是 hsl 顏色值的擴展，帶有一個 alpha 通道 - 它規定了對象的不透明度。其中的 alpha 參數定義不透明度。alpha 參數是介於 0.0（徹底透明）與 1.0（徹底不透明）的數字。

#rrggbb, 十六進制數 (好比 #ff0000)。

預約義/跨瀏覽器顏色名， HTML 和 CSS 顏色規範中定義了 147 中顏色名（17 種標準顏色加 130 種其餘顏色），查看標準顏色列表。

 

css 時間單位

m（秒）。

ms（毫秒）。

 

css 其餘單位

PPI(Pixels Per Inch)像素密度，所表示的是每英寸所擁有的像素數量，圖像分辨率單位，所以PPI數值越高，即表明顯示屏可以以越高的密度顯示圖像。固然，顯示的密度越高，擬真度就越高。

角度單位

rad（Radians）弧度，一個圓有2π弧度。

grad（Gradians）梯度，一個圓有400梯度。

turn(Turns)輪、圈，一個圓共一圈。

deg（Degress）度，一個圓360度。  

注意！！！： 90deg = 100grad = 0.25turn ≈ 1.570796326794897rad。

 

參考資料：

@Jonathan Cutrell  《7 CSS Units You Might Not Know About》

W3CHTML CSS單位

《css3中單位px,em,rem,vh,vw,vmin,vmax的區別及瀏覽器支持狀況》

 

版權申明： 本文爲原創文章， 轉載時請註明：來自w-rain的我的博客