CSS長度單位的區別 - pt,px和cm的區別

來源:互聯網
上載者:User

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

  我又寫了另外一個HTML例子,測試一下cm。

  在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>

  因為px能夠精確地表示元素在螢幕中的位置和大小,

  我將我的顯示器分別調到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是一個最基本的單位 ,就 是一個點。其它所有的單位,都和像素成一個固定的比例換算關係。所有的長度單位基於螢幕進行顯示的時候,都統一先換算成為像素的多少,然後進行顯示。所以,就電腦的螢幕而言 ,相對長度和絕對長度沒有本質差別。任何單位其實都 是像素 ,差別只是比例不同。

  因為px能夠精確地表示元素在螢幕中的位置和大小,網頁主要是為了螢幕顯示。

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

  CSS絕對長度單位 是對於輸出裝置(output device)而言的。拿pt來說,這是一個在文字排版工具(w ord,adobe等)中非常常用的字型單位,不管你的顯示器解析度是1024*768,還是800*600,同一篇文檔列印 在紙面上的結果是一樣的。

  網頁主要 是為了螢幕顯示,而不是為了列印等其它需要的。

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

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

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

  output device)而言的。拿pt來說,這是一個在文字排版工具 。

  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 點)



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。