這篇文章主要介紹css中px指的是什么單位,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)建站長(zhǎng)期為千余家客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù);打造開(kāi)放共贏平臺(tái),與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為彭州企業(yè)提供專業(yè)的網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì),彭州網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。
在css中,px全稱pixel,中文意思為“像素”,是計(jì)算機(jī)系統(tǒng)的數(shù)字化圖像長(zhǎng)度單位,是一個(gè)相對(duì)長(zhǎng)度單位,是相對(duì)于屏幕顯示器分辨率而言的。典型的電腦顯示器的分辨率是96DPI,也就是1像素為“1/96”英寸。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
px是pixel的縮寫(xiě),是像素單位,也是為影像顯示的基本單位,譯自英文“pixel”,pix是英語(yǔ)單詞picture的常用簡(jiǎn)寫(xiě),加上英語(yǔ)單詞“元素”element,就得到pixel,故“像素”表示“畫(huà)像元素”之意,有時(shí)亦被稱為pel(picture element)。
px (pixel,像素):是一個(gè)虛擬長(zhǎng)度單位,是計(jì)算機(jī)系統(tǒng)的數(shù)字化圖像長(zhǎng)度單位,如果px要換算成物理長(zhǎng)度,需要指定精度DPI(Dots Per Inch,每英寸像素?cái)?shù)),在掃描打印時(shí)一般都有DPI可選。Windows系統(tǒng)默認(rèn)是96dpi,Apple系統(tǒng)默認(rèn)是72dpi。
在CSS中,px是一個(gè)相對(duì)長(zhǎng)度單位,是相對(duì)于屏幕顯示器分辨率而言的。
在同樣一個(gè)設(shè)備上,每1個(gè)CSS像素所代表的物理像素是可以變化的(即CSS像素的第一方面的相對(duì)性);
在不同的設(shè)備之間,每1個(gè)CSS像素所代表的物理像素是可以變化的(即CSS像素的第二方面的相對(duì)性);
不同的設(shè)備,其圖像基本單位是不同的,比如顯示器的點(diǎn)距,可以認(rèn)為是顯示器的物理像素。現(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米見(jiàn)方的東西,與1米遠(yuǎn)處的10厘米見(jiàn)方的東西,看上去的大小差不多是一樣的,所謂一葉障目不見(jiàn)泰山,講的就是這個(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ū)和紙張時(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。
綜上,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)題。現(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)。
以上是“css中px指的是什么單位”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
分享文章:css中px指的是什么單位
轉(zhuǎn)載來(lái)于:http://aaarwkj.com/article14/jjpgge.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、響應(yīng)式網(wǎng)站、網(wǎng)站導(dǎo)航、移動(dòng)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、定制開(kāi)發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)