|
px，對(duì)于許多網(wǎng)頁(yè)設(shè)計(jì)者來(lái)說(shuō)，是最常用的CSS長(zhǎng)度單位。然而，1px到底多長(zhǎng)，恐怕沒(méi)有多少人回答得上來(lái)。 CSS長(zhǎng)度本身有絕對(duì)長(zhǎng)度和相對(duì)長(zhǎng)度的區(qū)分。 cm、pt之類的都是絕對(duì)長(zhǎng)度，它們是物理長(zhǎng)度——1cm是1/100米，而1米則大約是光在1秒鐘內(nèi)跑過(guò)距離的3億分之一。（至于光速和1秒的精確值到底是多少，請(qǐng)查閱維基百科光速條目和秒條目。）1pt則是1/72英寸，而1英寸換算到公制是2.54cm。 而em、ex，以及百分比，則是相對(duì)長(zhǎng)度。比如em相對(duì)于當(dāng)前字體大小，百分比則根據(jù)屬性定義不同有不同涵義，例如margin的值如果是百分比，表示是相對(duì)于父元素的width。 然而，px是什么？ 一般而言，pixel（像素）是圖像的基本采樣單位。詳細(xì)解釋見維基像素條目。所以它不是一個(gè)確定的物理量，也不是一個(gè)具體的點(diǎn)或者小方塊（盡管可以用點(diǎn)和小方塊來(lái)呈現(xiàn)），而是一個(gè)抽象概念。 不同的設(shè)備，其圖像基本單位是不同的，比如顯示器的點(diǎn)距，可以認(rèn)為是顯示器的物理像素?，F(xiàn)在的液晶顯示器的點(diǎn)距一般在0.25mm到0.29mm之間。而打印機(jī)的墨點(diǎn)，也可以認(rèn)為是打印機(jī)的物理像素，300DPI就是0.085mm，600DPI就是0.042mm。 注意，我們通常所說(shuō)的顯示器分辨率，其實(shí)是指桌面設(shè)定的分辨率，而不是顯示器的物理分辨率。只不過(guò)現(xiàn)在液晶顯示器成為主流，由于液晶的顯示原理與CRT不同，只有在桌面分辨率與物理分辨率一致的情況下，顯示效果最佳，所以現(xiàn)在我們的桌面分辨率幾乎總是與顯示器的物理分辨率一致了。 按照CSS規(guī)范的定義，CSS中的px是一個(gè)相對(duì)長(zhǎng)度，它相對(duì)的，是viewing device的分辨率。這個(gè)viewing device，通常就是電腦顯示器。典型的電腦顯示器的分辨率是96DPI，也就是1像素為1/96英寸（實(shí)際上，假設(shè)我們的顯示器分辨率都與物理分辨率一致，而液晶點(diǎn)距其實(shí)是0.25mm到0.29mm之間，所以不太可能是正好1/96英寸，而只是接近）。 一般來(lái)說(shuō)，px就是對(duì)應(yīng)設(shè)備的物理像素，然而如果輸出設(shè)備的解析度與電腦顯示器大不相同，輸出效果就會(huì)有問(wèn)題。例如打印機(jī)輸出到紙張上，其解析度比電腦屏幕要高許多，如果不縮放，直接使用設(shè)備的物理像素，那電腦上的照片由600DPI的打印機(jī)打出來(lái)就比用顯示器看小了約6倍。 所以CSS規(guī)定，在這種情況下，瀏覽器應(yīng)該對(duì)像素值進(jìn)行縮放調(diào)節(jié)，以保持閱讀體驗(yàn)的大體一致。也就是要保持一定像素的長(zhǎng)度在不同設(shè)備輸出上看上去的大小總是差不多。 怎樣確保這一點(diǎn)呢？直接按照設(shè)備物理像素的大小進(jìn)行換算當(dāng)然是一個(gè)方式，但是CSS考慮得更多，它建議，轉(zhuǎn)換應(yīng)按照“參考像素”（reference pixel）來(lái)進(jìn)行。 眼睛看到的大小，取決于可視角度。而可視角度取決于物體的實(shí)際大小以及物體與眼睛的距離。10米遠(yuǎn)處一個(gè)1米見方的東西，與1米遠(yuǎn)處的10厘米見方的東西，看上去的大小差不多是一樣的，所謂一葉障目不見泰山，講的就是這個(gè)常識(shí)。 因此CSS規(guī)范使用視角來(lái)定義“參考像素”，1參考像素即為從一臂之遙看解析度為96DPI的設(shè)備輸出（即1英寸96點(diǎn)）時(shí)，1點(diǎn)（即1/96英寸）的視角。 請(qǐng)注意這個(gè)差別——CSS規(guī)范定義的參考像素并不是1/96英寸，而是1/96英寸在一臂之遙的看起來(lái)的視角。通常認(rèn)為常人臂長(zhǎng)為28英寸，所以其視角可以計(jì)算出來(lái)是0.0213度。（即(1/96)in / (28in * 2 * PI / 360deg) ） 我們?cè)谑褂貌煌O(shè)備輸出時(shí)，眼睛與設(shè)備輸出的典型距離是不同的。比如電腦顯示器，通常是一臂之距，而看書和紙張時(shí)（對(duì)應(yīng)于打印機(jī)的設(shè)備輸出），則通常會(huì)更近一些?？措娨晻r(shí)則會(huì)更遠(yuǎn)，比如一般建議是電視機(jī)屏幕對(duì)角線的2.5到3倍長(zhǎng)——如果你是個(gè)42'彩電，那就差不多是3米遠(yuǎn)?？措娪暗脑挕揖筒恢蓝噙h(yuǎn)了，您自己量吧。 因此，1參考像素： 對(duì)于電腦顯示器是0.26mm（即1/96英寸）； 對(duì)于激光打印機(jī)是0.20mm（假設(shè)閱讀距離通常為55cm，即21英寸）； 而換算時(shí)，對(duì)于300DPI的打印機(jī)（即每個(gè)點(diǎn)是1/300英寸），1px通常會(huì)四舍五入到3dots，也就是0.25mm左右；而對(duì)于600DPI的打印機(jī)，則可能四舍五入到5dots，也就是0.21mm。  上圖中，左邊的屏幕（可以認(rèn)為是電腦屏幕）的典型視覺(jué)距離是71厘米即28英寸，其1px對(duì)應(yīng)了0.28mm；而右邊的屏幕（可以認(rèn)為是你的42寸高清電視）的典型視覺(jué)距離是3.5米即120英寸，其1px對(duì)應(yīng)1.3mm。42寸的1080p電視，分辨率是1920*1080，則其物理像素只有0.5mm左右，可見確實(shí)是高清哦。 綜上，px是一個(gè)相對(duì)單位，而且在特定設(shè)備上總是一個(gè)近似值（原則是盡量接近參考像素）。 然而，如果你把絕對(duì)單位理解為對(duì)輸出效果的絕對(duì)掌控，事情卻大相徑庭。就網(wǎng)頁(yè)輸出的最主要對(duì)象——電腦屏幕來(lái)說(shuō)，px可被視為一個(gè)基準(zhǔn)單位——與桌面分辨率一致，如果是液晶屏，則幾乎總是與液晶屏物理分辨率一致——也就是說(shuō)網(wǎng)頁(yè)設(shè)計(jì)者設(shè)定的1px，就是“最終看到這個(gè)網(wǎng)頁(yè)的用戶的顯示器上的1個(gè)點(diǎn)距”！反倒是那些絕對(duì)單位，其實(shí)一點(diǎn)也不絕對(duì)。 因?yàn)榻^對(duì)單位比如cm或者pt，顯示在屏幕上時(shí)最后還是要換算為像素，而且這種換算不是按照像素的實(shí)際物理長(zhǎng)度來(lái)?yè)Q算的（瀏覽器不用知道，也不可能知道當(dāng)前這臺(tái)顯示器的1px物理長(zhǎng)度到底是多少），而是按照桌面設(shè)定的DPI計(jì)算的。也就是說(shuō)，網(wǎng)頁(yè)設(shè)計(jì)者指定某個(gè)字體是12pt（即1/6英寸或4.2mm），實(shí)際上你量量屏幕，幾乎不可能是正好12pt，而只是接近12pt的16px（按照96DPI換算）而已。如果你的屏幕點(diǎn)距是0.29mm，則實(shí)際上是4.64mm或13.15pt。假如你把桌面改為大字體（120DPI），則最終12pt相當(dāng)于20px，按照0.29mm點(diǎn)距，最終效果是16.44pt。 過(guò)去，建議網(wǎng)頁(yè)設(shè)計(jì)者不要使用px，一個(gè)原因就是基于用戶可以根據(jù)自己的需要調(diào)節(jié)桌面DPI，從而控制絕對(duì)長(zhǎng)度的實(shí)際長(zhǎng)度（繞口令?。?。 然而這其實(shí)是可疑的。既然絕對(duì)長(zhǎng)度的實(shí)際長(zhǎng)度可以根據(jù)需要調(diào)節(jié)，沒(méi)有理由px這樣一個(gè)相對(duì)長(zhǎng)度不能根據(jù)需要調(diào)節(jié)。就好像照片在實(shí)際打印時(shí)你當(dāng)然可以根據(jù)需要縮放一樣，以px設(shè)定的字體和圖像在實(shí)際顯示時(shí)完全可以進(jìn)行縮放——這時(shí)網(wǎng)頁(yè)設(shè)計(jì)者指定的1px就不再對(duì)應(yīng)于用戶桌面的1px，而是可能對(duì)應(yīng)1.2px或1.5px或其他值。 過(guò)去瀏覽器的調(diào)節(jié)字體大小的選項(xiàng)只對(duì)絕對(duì)長(zhǎng)度有效（相當(dāng)于調(diào)節(jié)瀏覽器內(nèi)部的DPI），對(duì)px無(wú)效，這只能說(shuō)是過(guò)去瀏覽器的設(shè)計(jì)問(wèn)題，并不是px的固有問(wèn)題?，F(xiàn)在瀏覽器都已經(jīng)支持針對(duì)以px設(shè)定的字體的縮放了。像Firefox，用戶還可以選擇是單單縮放字體，還是連圖片一塊兒縮放。所以全部使用px的“像素級(jí)精確設(shè)計(jì)”完全是可行的，也是我認(rèn)為合理的設(shè)計(jì)方式。畢竟，CSS中的px本來(lái)就是要確保一致的閱讀體驗(yàn)。至于是流式布局還是固定布局，是否能適應(yīng)不同的分辨率，那是另一個(gè)話題，與是否使用px作為單位并沒(méi)有直接關(guān)聯(lián)。 |
|
|
來(lái)自： 埃德溫會(huì)館 > 《client》
