CSS長度單位 px和pt的區(qū)別
我要評論這樣很明白，px是一個點，它不是自然界的長度單位，誰能說出一個“點”有多長多大么？可以畫的很小，也可以很大。如果點很小，那畫面就清晰，我們稱它為“分辨率高”，反之，就是“分辨率低”。所以，“點”的大小是會“變”的，也稱為“相對長度”。
pt全稱為point，但中文不叫“點”，查金山詞霸可以看到，確切的說法是一個專用的印刷單位“磅”，大小為1/72英寸。所以它是一個自然界標(biāo)準(zhǔn)的長度單位，也稱為“絕對長度”。
因此就有這樣的說法，在網(wǎng)頁設(shè)計中，pixel是相對大小，而point是絕對大小。
但這種說法其實還是有問題，先來看看下面的例子： 
看出什么名堂了么？
72px要比72pt小一些，但96px正好和72pt一樣大小
讓我們來調(diào)整電腦的設(shè)置：在桌面上右鍵 > 屬性 > settings > Advanced > General > DPI setting > 96 DPI。
試著改變設(shè)置，設(shè)為72DPI，重啟，再打開瀏覽器看：72px已經(jīng)等同于72pt了。為什么？
還是再做個實驗：分別用800×600和1024×768看剛才的例子，明顯高分辨率下，文字就變小。而且，關(guān)鍵的是，無論用px還是pt，都會變小。pt并沒有如有些人所說，是“絕對”的，“固定”的。
但如果用打印機(jī)把這頁面打印出來，就可以看到：無論屏幕用什么分辨率，打印出來大小都是一樣的（這是當(dāng)然的）。
首先要分清“屏幕效果”和“打印效果”這兩個概念。
在瀏覽網(wǎng)頁過程中，所有的“大”“小”概念，都是基于“屏幕”這個“界面”上。“屏幕”上的各種信息，包括文字、圖片、表格等等，都會隨屏幕的分辨率變化而變化，一個100px寬度大小的圖片，在800×600分辨率下，要占屏幕寬度的1/8，但在1024×768下，則只占約1/10。所以如果在定義字體大小時，使用px作為單位，那一旦用戶改變顯示器分辨率從800到1024，用戶實際看到的文字就要變“小”（自然長度單位），甚至?xí)床磺?，影響瀏覽。
那是不是用pt做單位就沒這樣的問題呢？錯！問題同樣出現(xiàn)。剛才的例子已經(jīng)很清楚的說明，在不同分辨率下，無論是px還是pt，都會改變大小 。以現(xiàn)在的電腦屏幕情況，還沒有一種單位可以保證，在不同分辨率下，一個文字大小可以“固定不變”。因為這很難以實現(xiàn)也不是很有必要：全球電腦用戶以億來數(shù)，屏幕從14寸到40寸甚至更高都有，屏幕大小不同，分辨率也不同，要保證一個字體在所有用戶面前大小一樣，實在是MISSION IMPOSSIBLE。另外，電腦有其自身的調(diào)節(jié)性，用戶可以自己來調(diào)節(jié)：1）在瀏覽器中調(diào)節(jié)字體大??；2）在剛才提到的顯示屬性里調(diào)節(jié)。
那在頁面設(shè)計中到底是用px還是pt呢？
我認(rèn)為，這個并沒有什么原則性差異，就看自己處于什么角度思考了。
Mac機(jī)怎么情況不清楚，在Windows里，默認(rèn)的顯示設(shè)置中，把文字定義為96DPI（PPI，微軟都將DPI和PPI混為一體，我們也就無須較真了）。這樣的定義，說明了：1px＝1/96英寸。聯(lián)系pt的概念，1pt＝1/72英寸，可以得出，在這樣的設(shè)置中，1px＝0.75pt，常見的宋體9pt＝12px。在顯示器分辨率不變的基礎(chǔ)上（比如現(xiàn)在常用的1024×768），1px大小也就固定不變，改變顯示設(shè)置，調(diào)整為144DPI，可以得出，1px＝0.5pt，常見的宋體9pt＝18px。原先用12px來組成的一個文字，現(xiàn)在需要18px來組成，px多了，文字就“大”了，更易閱讀了。
所以，px和pt的使用區(qū)別，只有當(dāng)用戶改變默認(rèn)的96DPI下才會產(chǎn)生：使用px定義文字，無論用戶怎么設(shè)置，都不會改變大?。皇褂胮t定義文字，當(dāng)用戶設(shè)置超過96DPI的值，數(shù)值越大，字體就越大。
（附公式：px = pt * DPI / 72)
對了，剛才還提到改變?yōu)g覽器中文字大小的選項，也可以改變網(wǎng)頁的文字大小。但在這種情況下，使用px和pt都是無效的，因為這2個都是有實際“pixel”數(shù)值的單位，比如9pt是12px，大小固定。這里要引用新的單位：em，其實就是％。因為當(dāng)網(wǎng)頁中的字體沒有給出實際的px或pt定義的話，會有一個默認(rèn)值：12pt即16px，對應(yīng)瀏覽器中“字體大小”中的“中等”，以這個為標(biāo)準(zhǔn)，變大或縮小。（只適用于IE，在FF中，即便定義px或pt也都可以變大變?。?/strong>
所以，從這個概念上看，em才是真正的“相對單位”（百分比嘛，當(dāng)然是相對），而px和pt都是絕對單位（都有固定值）。
在網(wǎng)頁設(shè)計中，面向用戶的屏幕的基本單位是px，因此使用px作為單位是最簡單也最容易理解的，而pt也不過是通過了Windows的設(shè)置乘上了一個比率轉(zhuǎn)變成px再顯示，算是繞了個圈子。參考大部分大型網(wǎng)站，包括Adobe和Microsoft，都是使用px作為單位，而且在HTML中，默認(rèn)的單位就是px，是不是也暗示著px是網(wǎng)頁設(shè)計的“內(nèi)定單位”？
但在Word或Photoshop中，使用pt就相當(dāng)方便。因為使用Word和Photoshop的主要目的都不是為了屏幕瀏覽，而是輸出打印。當(dāng)打印到實體時，pt作為一個自然長度單位就方便實用了：比如Word中普通的文檔都用“宋體 9pt”，標(biāo)題用“黑體 16pt”等等，無論電腦怎么設(shè)置，打印出來永遠(yuǎn)就是這么大。又或者在Photoshop中，設(shè)置一個圖片中的某個藝術(shù)效果的字體是72pt大小，然后分別將這張圖片設(shè)為300DPI和72DPI，再打印出來，就可以看出，這2個字體大小完全一樣，只是“清晰度”不同，300DPI更清晰。這是毫無疑問的結(jié)果。
最后整理一下所有出現(xiàn)過的單位：
px：pixel，像素，屏幕上顯示的最小單位，用于網(wǎng)頁設(shè)計，直觀方便；
pt：point，是一個標(biāo)準(zhǔn)的長度單位，1pt＝1/72英寸，用于印刷業(yè)，非常簡單易用；
em：即％，在CSS中，1em＝100％，是一個比率，結(jié)合CSS繼承關(guān)系使用，具有靈活性。
PPI（DPI）：pixel（dot）per inch，每英寸的像素（點）數(shù)，是一個率，表示了“清晰度”，“精度”
（后記，今后的發(fā)展趨勢，傳統(tǒng)的CRT顯示器將被LCD淘汰，而LCD有個特點就是分辨率固定，而不像CRT那樣，一個17寸CRT可以有從640×480到1600×1200不等，但17寸LCD只有1280×1024這樣一個標(biāo)準(zhǔn)分辨率，也是最大分辨率，而且占滿屏幕，不會像CRT那樣四周留黑邊，要靠人工調(diào)節(jié)。因此以后一臺電腦看網(wǎng)頁，效果可以保持相對穩(wěn)定。由于技術(shù)的發(fā)展，LCD的“精度”也越來越高，先來計算一下LCD的“精度”（PPI，DPI）：
15寸LCD是1024×768分辨率，對角線長為15寸（英寸），根據(jù)勾股定理，很容易可以算出，屏幕寬度是11.55英寸，再用1024來除，得出15寸LCD是88.68DPI，其余的同理，看數(shù)據(jù)：
15"(1024*768): 88.68 DPI
17"(1280*1024): 96.42 DPI
19"(1280*1024): 86.27 DPI; 19"W(1440*900): 89.37 DPI
20"(1600*1200): 103.92 DPI; 20"W(1680*1050): 99.06 DPI
22"W(1680*1050): 90.05 DPI
24"W(1920*1200): 94.34 DPI
以前普通15寸CRT在800×600分辨率下，大約是72DPI。讓我們來算算最常用的“宋體 9pt（12px）”，在各種顯示器下，實際可視大小是多少：
15"CRT(800*600): 12/72=0.167英寸，大約是4.2毫米，是很大很容易辨識的，這也是為什么前幾年最流行的中文字體大小
LCD: 15": 0.135英寸，17": 0.124英寸，19": 0.139英寸，19"W: 0.134英寸，20": 0.115英寸，20"W: 0.121英寸，22"W: 0.133英寸，24"W: 0.127英寸
基本上，小于0.13英寸，對于視力不太好的或者年老的用戶，就會有閱讀困難，小于0.12英寸，即便一般用戶也會感覺吃力。所以，一般在這種情況下，要么使用16px以上的字體大小，如果還是要9pt，那就改變顯示屬性，間接來改變到16px以上也一樣。
再看看PDA上情況，Dell有款x50v，分辨率640×480，屏幕大小為3.7寸，可以推算出，這個屏幕是驚人的224.70DPI，高的可怕，12px的字在里面幾乎是難以辨認(rèn)，因此換有另一種規(guī)格的字體來專門適合這些高分辨率的場合，同時這樣的字體更顯得清晰圓滑，接近于傳統(tǒng)印刷。
相信不久的將來，桌面電腦系統(tǒng)也會如此，讓我們?yōu)g覽網(wǎng)頁也能像翻閱雜志那樣精美細(xì)致、賞心悅目。
相關(guān)文章
- CSS Grid 是一種二維布局系統(tǒng)，可以同時控制行和列，相比 Flex（一維布局），更適合用在整體頁面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋2025-04-16
CSS Padding 和 Margin 區(qū)別全解析
CSS 中的 padding 和 margin 是兩個非常基礎(chǔ)且重要的屬性，它們用于控制元素周圍的空白區(qū)域，本文將詳細(xì)介紹 padding 和 margin 的概念、區(qū)別以及如何在實際項目中使用它們2025-04-07- will-change 是一個 CSS 屬性，用于告訴瀏覽器某個元素在未來可能會發(fā)生哪些變化，本文給大家介紹CSS will-change 屬性詳解，感興趣的朋友一起看看吧2025-04-07
- 本文給大家分享在 CSS 中，去除a標(biāo)簽（超鏈接）的下劃線的幾種方法，本文給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧2025-04-07
在前端開發(fā)中，CSS（層疊樣式表）不僅是用來控制網(wǎng)頁的外觀和布局，更是實現(xiàn)復(fù)雜交互和動態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展，CSS的用法也日益豐富和高級,本文將2025-04-07css中的 vertical-align與line-height作用詳解
文章詳細(xì)介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見使用場景、常見問題及解決方案，感興趣的朋友跟隨小編一起看看吧2025-03-26淺析CSS 中z - index屬性的作用及在什么情況下會失效
z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性（如relative、absolute、fixed或sticky），本文給大家介紹CSS 中z - index屬性的作用2025-03-21- 文章詳細(xì)介紹了CSS中的打印媒體查詢@mediaprint包括基本語法、常見使用場景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁控制、調(diào)整邊距和背景等2025-03-18
CSS模擬 html 的 title 屬性(鼠標(biāo)懸浮顯示提示文字效果)
本文介紹了如何使用CSS模擬HTML的title屬性,通過鼠標(biāo)懸浮顯示提示文字效果,通過設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實現(xiàn)了提示內(nèi)容的隱藏和顯示，感興趣的朋友一起2025-03-10
前端 CSS 動態(tài)設(shè)置樣式：:class、:style 等技巧(推薦)
本文介紹了Vue.js中動態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法：對象語法和數(shù)組語法,通過對象語法,可以根據(jù)條件動態(tài)切換類名或樣式；通過數(shù)組語法,可以同時綁定多個類名或樣式,此外2025-02-26
