px畫素 em相對單位,到底是什麼意思?

2021-06-07 22:57:00 字數 3600 閱讀 1793

px,對於許多網頁設計者來說,是最常用的css長度單位。然而,1px到底多長,恐怕沒有多少人回答得上來。 

css長度本身有絕對長度和相對長度的區分。 

cm、pt之類的都是絕對長度,它們是物理長度——1cm是1/100公尺,而1公尺則大約是光在1秒鐘內跑過距離的3億分之一。(至於光速和1秒的精確值到底是多少,請查閱維基百科光速條目和秒條目。)1pt則是1/72英吋,而1英吋換算到公制是2.54cm。 

而em、ex,以及百分比,則是相對長度。比如em相對於當前字型大小,百分比則根據屬性定義不同有不同涵義,例如margin的值如果是百分比,表示是相對于父元素的width。 

然而,px是什麼? 

一般而言,pixel(畫素)是影象的基本取樣單位。詳細解釋見維基畫素條目。所以它不是乙個確定的物理量,也不是乙個具體的點或者小方塊(儘管可以用點和小方塊來呈現),而是乙個抽象概念。 

不同的裝置,其影象基本單位是不同的,比如顯示器的點距,可以認為是顯示器的物理畫素。現在的液晶顯示器的點距一般在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規定,在這種情況下,瀏覽器應該對畫素值進行縮放調節,以保持閱讀體驗的大體一致。也就是要保持一定畫素的長度在不同裝置輸出上看上去的大小總是差不多。 

怎樣確保這一點呢?直接按照裝置物理畫素的大小進行換算當然是乙個方式,但是css考慮得更多,它建議,轉換應按照「參考畫素」(reference pixel)來進行。 

眼睛看到的大小,取決於可視角度。而可視角度取決於物體的實際大小以及物體與眼睛的距離。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。 

上圖中,左邊的螢幕(可以認為是電腦螢幕)的典型視覺距離是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作為單位並沒有直接關聯。 em

css提供的測量型別尺寸

源自印刷界,乙個em表示一種特殊字型的大寫字母m的高度。在網頁上,乙個em是網頁瀏覽器的基礎文字尺寸的高度,它一般情況下是16px。然而,任何人都可以改變這個基礎尺寸的設定,因此1em對於有的人來說可能是16px,但是在其他人的瀏覽器上可能是24px。換句話說,em是乙個相對的度量單位。

em是相對長度單位。相對於當前物件內文字的字型尺寸。 

一般用法是,我們定義或瀏覽器的預設全頁面的字型大小,當然我贊同自己定義會比較好,因為這樣就不會因為瀏覽器的原因而使頁面的字型大小變化導致頁面錯位。 

所以我們可以一開始這樣定義 

body//當然字型大小就自定了。 

這是font-size的這個值便作為1em,font-size的定義值可能作為乙個參考值,我們就可以根據這個參考值來使用em了,所以em就是所謂的相對長度單位了. 

換算: 

1.25em=1.25 * 12px=15px

//****************************************=

畫素(px)到底是個什麼單位

px,對於許多網頁設計者來說,是最常用的css長度單位。然而,1px到底多長,恐怕沒有多少人回答得上來。css長度本身有絕對長度和相對長度的區分。cm pt之類的都是絕對長度,它們是物理長度 1cm是1 100公尺,而1公尺則大約是光在1秒鐘內跑過距離的3億分之一。至於光速和1秒的精確值到底是多少,...

敏捷到底是什麼?

文 ivar jacobson 在支援軟體工程 比如rational統一過程rup 與敏捷陣營 比如scrum或是xp 之間,人們一直存在著衝突。也不難理解,因為這兩種方法間都是在用著彼此並不相容的方式來描述的。其實大可不必,因為他們背後的觀點全然是相輔相成的。關鍵在於該如何用對兩者來說都公平的方式...

我們到底是什麼?

我們到底是什麼?我們是一種生物電流 生物電流有幾種狀態,喜怒哀樂等,可以根據外部環境進行自我切換 該種生物電流附屬在一種器官硬體上面 我們可以從器官硬體上感知一些資訊,產生新的資訊生物電流,新產生的生物電流符合原先的標準 我們可以把資訊電流儲存在器官硬體上,但具體如何儲存等資訊無法被我們感知 我們的...