網(wǎng)頁(yè)美工設(shè)計(jì)

網(wǎng)頁(yè)css中pt、px、em、ex、cm、rem的區(qū)別

編輯：時(shí)間：2018-08-17 14:28:20

　　在CSS樣式表中，我們經(jīng)常會(huì)看到pt， px，em，ex，in等這類(lèi)長(zhǎng)度單位。它們各是什么意思，有什么區(qū)別呢?

　　在CSS樣式表中，長(zhǎng)度單位分兩種：

　　相對(duì)長(zhǎng)度單位，如px, em等

　　絕對(duì)長(zhǎng)度單位，如pt,mm等

　　也談px和pt的區(qū)別

　　經(jīng)常看到有人拿px和pt比較，主要是為了爭(zhēng)辯在確定字體大小(font-size)或其它CSS屬性大小時(shí)，用什么樣的CSS長(zhǎng)度單位更加好。有人說(shuō)，用pt更好，因?yàn)閜t是絕對(duì)長(zhǎng)度單位，不會(huì)因?yàn)槠聊环直媛蚀笮。蛘咂渌蛩囟淖儭?/p>

　　我去做了一個(gè)測(cè)試，寫(xiě)了這樣一個(gè)HTML例子。代碼如下：

　　<html>

　　<head><title>CSS單位長(zhǎng)度區(qū)別 - px和pt的區(qū)別</title></head>

　　<body >

　　</body>

　　</html>

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

　　我又寫(xiě)了另外一個(gè)HTML例子，測(cè)試一下cm(厘米)。代碼如下：

　　<html>

　　<head><title>CSS長(zhǎng)度單位的區(qū)別 - pt,px和cm的區(qū)別</title></head>

　　<body >

　　以下div寬度300pt，高度30pt： <br>

　　以下div寬度300px，高度30px：<br>

　　以下div寬度10cm，高度3cm： <br>

　　</body>

　　</html>

　　結(jié)果是，cm(厘米)也是隨著顯示器分辨率變化而變化的。

　　對(duì)于計(jì)算機(jī)的屏幕設(shè)備而言，像素(Pixel)或者說(shuō)px是一個(gè)最基本的單位，就是一個(gè)點(diǎn)。其它所有的單位，都和像素成一個(gè)固定的比例換算關(guān)系。所有的長(zhǎng)度單位基于屏幕進(jìn)行顯示的時(shí)候，都統(tǒng)一先換算成為像素的多少，然后進(jìn)行顯示。所以，就計(jì)算機(jī)的屏幕而言，相對(duì)長(zhǎng)度和絕對(duì)長(zhǎng)度沒(méi)有本質(zhì)差別。任何單位其實(shí)都是像素，差別只是比例不同。

　　如果把討論擴(kuò)展到其它輸出設(shè)備，比如打印機(jī)，基本的長(zhǎng)度單位可能不是像素，而是其它的和生活中的度量單位一致的單位了。

　　CSS絕對(duì)長(zhǎng)度單位是對(duì)于輸出設(shè)備(output device)而言的。拿pt來(lái)說(shuō)，這是一個(gè)在文字排版工具(word,adobe等)中非常常用的字體單位，不管你的顯示器分辨率是1024*768，還是800*600，同一篇文檔打印在紙面上的結(jié)果是一樣的。

　　寫(xiě)網(wǎng)頁(yè)用哪個(gè)長(zhǎng)度單位更好，是px還是pt呢?

　　我個(gè)人比較偏向px，因?yàn)閜x能夠精確地表示元素在屏幕中的位置和大小，網(wǎng)頁(yè)主要是為了屏幕顯示，而不是為了打印等其它需要的。

　　CSS相對(duì)長(zhǎng)度單位(relative length unit)

　　CSS相對(duì)長(zhǎng)度單位中的相對(duì)二字，表明了其長(zhǎng)度單位會(huì)隨著它的參考值的變化而變化，不是固定的。

　　以下是CSS相對(duì)長(zhǎng)度單位列表：

　　CSS相對(duì)長(zhǎng)度單位說(shuō)明

　　em元素的字體高度The height of the element's font

　　ex字母x的高度The height of the letter "x"

　　px像素Pixels

　　%百分比Percentage

　　CSS絕對(duì)長(zhǎng)度單位(absolute length unit)

　　絕對(duì)長(zhǎng)度單位是一個(gè)固定的值。比如我們常用的有mm，就是毫米的意思。