CSS中的長度單位

CSS中的長度單位

CSS中的單位最經常使用的是px，可是確定也會遇到em，cm等其餘單位，掌握這些單位的特質才能靈活運用這麼多不一樣的單位。

長度單位包括包括：

• 相對單位
  • em,ex,ch,rem,vw,vh,vmax,vmin
• 絕對單位
  • cm,mm,q,in,pt,pc,px

絕對單位

咱們在這裏只介紹經常使用絕對單位。絕對單位中最經常使用的是px，絕對單位之間的換算以下：

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
複製代碼

px

px單位名稱爲像素（Pixels）。像素是指由圖像的小方格組成的，這些小方塊都有一個明確的位置和被分配的色彩數值，小方格顏色和位置就決定該圖像所呈現出來的樣子。在電腦屏幕上每個小方格的長度就能夠理解爲是1px。

當圖片尺寸以像素爲單位時，咱們須要指定其固定的分辨率，才能將圖片尺寸與現實中的實際尺寸相互轉換。例如大多數網頁製做經常使用圖片分辨率爲72，即每英寸像素爲72，1英寸等於2.54釐米，那麼經過換算能夠得出每釐米等於28像素；又如15x15釐米長度的圖片，等於420*420像素的長度。

in

in單位名稱爲英寸（Inches)。映射爲像素單位的話：

1in = 96px
複製代碼

cm

cm單位名稱爲釐米（Centimeters)。是咱們生活中熟知的長度單位，也能夠映射爲像素單位：

1cm = 37.8px
複製代碼

mm

mm單位名稱爲毫米（Millimeters）。也是咱們生活中熟知的長度單位，映射爲像素：

1mm = 3.78px
複製代碼

相對單位

咱們在這裏只介紹經常使用相對單位。相對單位中最經常使用的是em和rem。

em

相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸（16px）。在沒有任何CSS規則的前提下，1em的長度是：

1em = 16px
複製代碼

em是繼承父元素的字體大小，但是當父元素字體大小改變時，又得從新計算了，這不怎麼方便，還好rem解決了這個問題。

rem

相對於根元素(即html元素)font-size計算值的倍數。此單位爲css3新增單位，不兼容低版本IE，Safari瀏覽器。

總結

總的來講，CSS中相對單位，絕對單位還有本文未介紹的視口單位（vm，vmvh，vmin，vmax），根據設備和項目所需進行靈活運用，在研發過程帶來極大的便利和可觀的效果。