網(wǎng)頁(yè)css中pt、px、em、ex、cm、rem的區別
在CSS樣式表中,我們經(jīng)常會(huì )看到pt, px,em,ex,in等這類(lèi)長(cháng)度單位。它們各是什么意思,有什么區別呢?
在CSS樣式表中,長(cháng)度單位分兩種:
相對長(cháng)度單位,如px, em等
絕對長(cháng)度單位,如pt,mm等
也談px和pt的區別
經(jīng)常看到有人拿px和pt比較,主要是為了爭辯在確定字體大小(font-size)或其它CSS屬性大小時(shí),用什么樣的CSS長(cháng)度單位更加好。有人說(shuō),用pt更好,因為pt是絕對長(cháng)度單位,不會(huì )因為屏幕分辨率大小,或者其它因素而改變。
我去做了一個(gè)測試,寫(xiě)了這樣一個(gè)HTML例子。代碼如下:
<html>
<head><title>CSS單位長(cháng)度區別 - 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設置的字體,都隨著(zhù)分辨率變化而變化。(我使用的瀏覽器是IE6,其它瀏覽器上尚未測試過(guò)。)
我又寫(xiě)了另外一個(gè)HTML例子,測試一下cm(厘米)。代碼如下:
<html>
<head><title>CSS長(cháng)度單位的區別 - 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(厘米)也是隨著(zhù)顯示器分辨率變化而變化的。
對于計算機的屏幕設備而言,像素(Pixel)或者說(shuō)px是一個(gè)最基本的單位,就是一個(gè)點(diǎn)。其它所有的單位,都和像素成一個(gè)固定的比例換算關(guān)系。所有的長(cháng)度單位基于屏幕進(jìn)行顯示的時(shí)候,都統一先換算成為像素的多少,然后進(jìn)行顯示。所以,就計算機的屏幕而言,相對長(cháng)度和絕對長(cháng)度沒(méi)有本質(zhì)差別。任何單位其實(shí)都是像素,差別只是比例不同。
如果把討論擴展到其它輸出設備,比如打印機,基本的長(cháng)度單位可能不是像素,而是其它的和生活中的度量單位一致的單位了。
CSS絕對長(cháng)度單位是對于輸出設備(output device)而言的。拿pt來(lái)說(shuō),這是一個(gè)在文字排版工具(word,adobe等)中非常常用的字體單位,不管你的顯示器分辨率是1024*768,還是800*600,同一篇文檔打印在紙面上的結果是一樣的。
寫(xiě)網(wǎng)頁(yè)用哪個(gè)長(cháng)度單位更好,是px還是pt呢?
我個(gè)人比較偏向px,因為px能夠精確地表示元素在屏幕中的位置和大小,網(wǎng)頁(yè)主要是為了屏幕顯示,而不是為了打印等其它需要的。
CSS相對長(cháng)度單位(relative length unit)
CSS相對長(cháng)度單位中的相對二字,表明了其長(cháng)度單位會(huì )隨著(zhù)它的參考值的變化而變化,不是固定的。
以下是CSS相對長(cháng)度單位列表:
CSS相對長(cháng)度單位說(shuō)明
em元素的字體高度The height of the element's font
ex字母x的高度The height of the letter "x"
px像素Pixels
%百分比Percentage
CSS絕對長(cháng)度單位(absolute length unit)
絕對長(cháng)度單位是一個(gè)固定的值。比如我們常用的有mm,就是毫米的意思。
以下是CSS絕對長(cháng)度單位列表:
CSS絕對長(cháng)度單位說(shuō)明
in英寸Inches (1 英寸 = 2.54 厘米)
cm厘米Centimeters
mm毫米Millimeters
pt點(diǎn)Points (1點(diǎn) = 1/72英寸)
pc皮卡Picas (1 皮卡 = 12 點(diǎn))
<< 上一篇:視口單位vm、vh在網(wǎng)頁(yè)中的排版應用 | >> 下一篇:網(wǎng)頁(yè)設計中模糊背景圖設計的應用技巧 |
- 2018-08-01視口單位vm、vh在網(wǎng)頁(yè)中的排版應用
- 2018-07-192018年下半年網(wǎng)頁(yè)設計較新流行趨勢
- 2018-07-13網(wǎng)頁(yè)設計使用單頁(yè)設計還是多頁(yè)設計
- 2018-07-03CSS樣式中zoom的含義及用法作用
- 2018-06-16網(wǎng)頁(yè)和APP中背景的8個(gè)主要設計趨勢
- 2018-06-09網(wǎng)頁(yè)設計較新流行設計趨勢
- 2018-06-05網(wǎng)頁(yè)設計提升用戶(hù)體驗的設計原則
- 2018-05-26網(wǎng)頁(yè)設計中漸變色彩作用特點(diǎn)
- 2018-05-18PPT設計中常見(jiàn)的幾種字體推薦
- 2018-05-12微信小程序設計開(kāi)發(fā)中flex的用法
- 2018-05-12現在正在流行的3種網(wǎng)頁(yè)設計趨勢
- 2018-05-08微信小程序尺寸單位rpx和px怎么換算
- 2018-04-202018年較新網(wǎng)頁(yè)設計流行趨勢分析
- 2018-04-13網(wǎng)頁(yè)設計中背景紋理的設計特點(diǎn)
- 2018-04-10學(xué)習網(wǎng)頁(yè)設計的心得體會(huì )
- 1 室內設計培訓課程 人咨詢(xún)中 19
- 2 平面設計培訓課程 人咨詢(xún)中 18
- 3 網(wǎng)頁(yè)設計培訓課程 人咨詢(xún)中 18
- 4 淘寶開(kāi)店培訓課程 人咨詢(xún)中 15
- 5 動(dòng)漫設計培訓課程 人咨詢(xún)中 12
- 6 淘寶美工培訓課程 人咨詢(xún)中 17
- 7 電腦辦公培訓課程 人咨詢(xún)中 15
- 8 網(wǎng)絡(luò )營(yíng)銷(xiāo)培訓課程 人咨詢(xún)中 13
- 9 模具設計培訓課程 人咨詢(xún)中 10
- 10 網(wǎng)站開(kāi)發(fā)培訓課程 人咨詢(xún)中 16