css中pt、px、em、ex、in等這類長度單位詳細說明


在CSS樣式表中,我們經常會看到pt, px,em,ex,in等這類長度單位。它們各是什么意思,有什么區別呢?

 

在CSS樣式表中,長度單位分兩種:

 

  • 相對長度單位,如px, em等
  • 絕對長度單位,如pt,mm等

 

也談px和pt的區別

 

經常看到有人拿px和pt比較,主要是為了爭辯在確定字體大小(font-size)或其它CSS屬性大小時,用什么樣的CSS長度單位更加好。有人說,用pt更好,因為pt是絕對長度單位,不會因為屏幕分辨率大小,或者其它因素而改變。

 

我去做了一個測試,寫了這樣一個HTML例子。代碼如下:

 

<html>

 

<head><title>CSS單位長度區別 - px和pt的區別</title></head>

 

<body >

 

<p style = "font-size:20pt;">Font-size is 20pt</p>

 

<p style = "font-size:20px;">Font-size is 20px</p>

 

</body>

 

</html>

 

 

我將我的顯示器分別調到1024*768和800*600的分辨率(指screen resolution)。不管是用pt還是用px設置的字體,都隨着分辨率變化而變化。(我使用的瀏覽器是IE6,其它瀏覽器上尚未測試過。)

我又寫了另外一個HTML例子,測試一下cm(厘米)。代碼如下:

 

<html>

 

<head><title>CSS長度單位的區別 - pt,px和cm的區別</title></head>

 

<body >

 

以下div寬度300pt,高度30pt: <br>

 

<div style = "width:300pt;height:30pt;border:1px solid blue;"></div>

 

以下div寬度300px,高度30px:<br>

 

<div style = "width:300px;height:30px;border:1px solid blue;"></div>

 

以下div寬度10cm,高度3cm: <br>

 

<div style = "width:10cm;height:3cm;border:1px solid blue;"></div>

 

</body>

 

</html>

 

 

結果是,cm(厘米)也是隨着顯示器分辨率變化而變化的。

對於計算機的屏幕設備而言,像素(Pixel)或者說px是一個最基本的單位,就是一個點。其它所有的單位,都和像素成一個固定的比例換算關系。所有的長度單位基於屏幕進行顯示的時候,都統一先換算成為像素的多少,然后進行顯示。所以,就計算機的屏幕而言,相對長度和絕對長度沒有本質差別。任何單位其實都是像素,差別只是比例不同。

如果把討論擴展到其它輸出設備,比如打印機,基本的長度單位可能不是像素,而是其它的和生活中的度量單位一致的單位了。

CSS絕對長度單位是對於輸出設備(output device)而言的。拿pt來說,這是一個在文字排版工具(word,adobe等)中非常常用的字體單位,不管你的顯示器分辨率是1024*768,還是800*600,同一篇文檔打印在紙面上的結果是一樣的。

寫網頁用哪個長度單位更好,是px還是pt呢?

我個人比較偏向px,因為px能夠精確地表示元素在屏幕中的位置和大小,網頁主要是為了屏幕顯示,而不是為了打印等其它需要的。

 

CSS相對長度單位(relative length unit)

 

CSS相對長度單位中的相對二字,表明了其長度單位會隨着它的參考值的變化而變化,不是固定的。

以下是CSS相對長度單位列表:

 

CSS相對長度單位 說明
em 元素的字體高度The height of the element's font
ex 字母x的高度The height of the letter "x"
px 像素Pixels
% 百分比Percentage

 

 

CSS絕對長度單位(absolute length unit)

 

絕對長度單位是一個固定的值。比如我們常用的有mm,就是毫米的意思。

以下是CSS絕對長度單位列表:

 

CSS絕對長度單位 說明
in 英寸Inches (1 英寸 = 2.54 厘米)
cm 厘米Centimeters
mm 毫米Millimeters
pt 點Points (1點 = 1/72英寸)
pc 皮卡Picas (1 皮卡 = 12 點)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM