px,對於許多網頁設計者來說,是最常用的css長度單位。然而,1px到底多長,恐怕沒有多少人回答得上來。
css長度本身有絕對長度和相對長度的區分。
cm、pt之類的都是絕對長度,它們是物理長度——1cm是1/100公尺,而1公尺則大約是光在1秒鐘內跑過距離的3億分之一。(至於光速和1秒的精確值到底是多少,請查閱維基百科[url=光速]光速[/url]條目和[url=秒]秒[/url]條目。)1pt則是1/72英吋,而1英吋換算到公制是2.54cm。
而em、ex,以及百分比,則是相對長度。比如em相對於當前字型大小,百分比則根據屬性定義不同有不同涵義,例如margin的值如果是百分比,表示是相對于父元素的width。
然而,px是什麼?
一般而言,pixel(畫素)是影象的基本取樣單位。詳細解釋見維基[url=畫素]畫素[/url]條目。所以它不是乙個確定的物理量,也不是乙個具體的點或者小方塊(儘管可以用點和小方塊來呈現),而是乙個抽象概念。
不同的裝置,其影象基本單位是不同的,比如顯示器的點距,可以認為是顯示器的物理畫素。現在的液晶顯示器的點距一般在0.25mm到0.29mm之間。而印表機的墨點,也可以認為是印表機的物理畫素,300dpi就是0.085mm,600dpi就是0.042mm。
注意,我們通常所說的顯示器解析度,其實是指桌面設定的解析度,而不是顯示器的物理解析度。只不過現在液晶顯示器成為主流,由於液晶的顯示原理與crt不同,只有在桌面解析度與物理解析度一致的情況下,顯示效果最佳,所以現在我們的桌面解析度幾乎總是與顯示器的物理解析度一致了。
按照css規範的定義,css中的px是乙個相對長度,它相對的,是viewing device的解析度。這個viewing device,通常就是電腦顯示器。典型的電腦顯示器的解析度是96dpi,也就是1畫素為1/96英吋(實際上,假設我們的顯示器解析度都與物理解析度一致,而液晶點距其實是0.25mm到0.29mm之間,所以不太可能是正好1/96英吋,而只是接近)。
一般來說,px就是對應裝置的物理畫素,然而如果輸出裝置的解析度與電腦顯示器大不相同,輸出效果就會有問題。例如印表機輸出到紙張上,其解析度比電腦螢幕要高許多,如果不縮放,直接使用裝置的物理畫素,那電腦上的**由600dpi的印表機打出來就比用顯示器看小了約6倍。
所以css規定,在這種情況下,瀏覽器應該對畫素值進行縮放調節,以保持閱讀體驗的大體一致。也就是要保持一定畫素的長度在不同裝置輸出上看上去的大小總是差不多。
眼睛看到的大小,取決於可視角度。而可視角度取決於物體的實際大小以及物體與眼睛的距離。10公尺遠處乙個1公尺見方的東西,與1公尺遠處的10厘公尺見方的東西,看上去的大小差不多是一樣的,所謂一葉障目不見泰山,講的就是這個常識。
因此css規範使用視角來定義「參考畫素」,1參考畫素即為從一臂之遙看解析度為96dpi的裝置輸出(即1英吋96點)時,1點(即1/96英吋)的視角。
請注意這個差別——css規範定義的參考畫素並不是1/96英吋,而是1/96英吋在一臂之遙的看起來的視角。通常認為常人臂長為28英吋,所以其視角可以計算出來是0.0213度。(即(1/96)in / (28in * 2 * pi / 360deg) )
我們在使用不同裝置輸出時,眼睛與裝置輸出的典型距離是不同的。比如電腦顯示器,通常是一臂之距,而看書和紙張時(對應於印表機的裝置輸出),則通常會更近一些。看電視時則會更遠,比如一般建議是電視機螢幕對角線的2.5到3倍長——如果你是個42'彩電,那就差不多是3公尺遠。看電影的話……我就不知道多遠了,您自己量吧。
對於電腦顯示器是0.26mm(即1/96英吋);
對於雷射印表機是0.20mm(假設閱讀距離通常為55cm,即21英吋);
而換算時,對於300dpi的印表機(即每個點是1/300英吋),1px通常會四捨五入到3dots,也就是0.25mm左右;而對於600dpi的印表機,則可能四捨五入到5dots,也就是0.21mm。
[img]
上圖中,左邊的螢幕(可以認為是電腦螢幕)的典型視覺距離是71厘公尺即28英吋,其1px對應了0.28mm;而右邊的螢幕(可以認為是你的42寸高畫質電視)的典型視覺距離是3.5公尺即120英吋,其1px對應1.3mm。42寸的1080p電視,解析度是1920*1080,則其物理畫素只有0.5mm左右,可見確實是高畫質哦。
綜上,px是乙個相對單位,而且在特定裝置上總是乙個近似值(原則是盡量接近參考畫素)。
然而,如果你把絕對單位理解為對輸出效果的絕對掌控,事情卻大相徑庭。就網頁輸出的最主要物件——電腦螢幕來說,px可被視為乙個基準單位——與桌面解析度一致,如果是液晶屏,則幾乎總是與液晶屏物理解析度一致——也就是說網頁設計者設定的1px,就是「最終看到這個網頁的使用者的顯示器上的1個點距」!反倒是那些絕對單位,其實一點也不絕對。
因為絕對單位比如cm或者pt,顯示在螢幕上時最後還是要換算為畫素,而且這種換算不是按照畫素的實際物理長度來換算的(瀏覽器不用知道,也不可能知道當前這台顯示器的1px物理長度到底是多少),而是按照桌面設定的dpi計算的。也就是說,網頁設計者指定某個字型是12pt(即1/6英吋或4.2mm),實際上你量量螢幕,幾乎不可能是正好12pt,而只是接近12pt的16px(按照96dpi換算)而已。如果你的螢幕點距是0.29mm,則實際上是4.64mm或13.15pt。假如你把桌面改為大字型(120dpi),則最終12pt相當於20px,按照0.29mm點距,最終效果是16.44pt。
過去,建議網頁設計者不要使用px,乙個原因就是基於使用者可以根據自己的需要調節桌面dpi,從而控制絕對長度的實際長度(繞口令啊)。
然而這其實是可疑的。既然絕對長度的實際長度可以根據需要調節,沒有理由px這樣乙個相對長度不能根據需要調節。就好像**在實際列印時你當然可以根據需要縮放一樣,以px設定的字型和影象在實際顯示時完全可以進行縮放——這時網頁設計者指定的1px就不再對應於使用者桌面的1px,而是可能對應1.2px或1.5px或其他值。
過去瀏覽器的調節字型大小的選項只對絕對長度有效(相當於調節瀏覽器內部的dpi),對px無效,這只能說是過去瀏覽器的設計問題,並不是px的固有問題。現在瀏覽器都已經支援針對以px設定的字型的縮放了。像firefox,使用者還可以選擇是單單縮放字型,還是連一塊兒縮放。所以全部使用px的「畫素級精確設計」完全是可行的,也是我認為合理的設計方式。畢竟,css中的px本來就是要確保一致的閱讀體驗。至於是流式布局還是固定布局,是否能適應不同的解析度,那是另乙個話題,與是否使用px作為單位並沒有直接關聯。
px畫素 em相對單位,到底是什麼意思?
px,對於許多網頁設計者來說,是最常用的css長度單位。然而,1px到底多長,恐怕沒有多少人回答得上來。css長度本身有絕對長度和相對長度的區分。cm pt之類的都是絕對長度,它們是物理長度 1cm是1 100公尺,而1公尺則大約是光在1秒鐘內跑過距離的3億分之一。至於光速和1秒的精確值到底是多少,...
REST,RESTful到底是個什麼?
0.rest不是 rest 這個單詞,而是幾個單詞縮寫。但即使那幾個單詞說出來,也無法理解在說什麼 不是要貶低人,是我自己也理解困難 1.rest描述的是在網路中client和server的一種互動形式 rest本身不實用,實用的是如何設計 restful api rest風格的網路介面 2.ser...
IPU到底是個什麼鬼?
在 i.mx6 應用處理器中,有乙個很重要的單元 ipu image processing unit 影象處理單元。影象處理單元的目標是提供從影象輸入 攝像頭感測器 電視訊號輸入等 到顯示裝置 lcd顯示屏 tv輸出 外部影象處理單元等 端到端的資料流訊號處理的全面支援。ipu庫 ipu libra...