css中的相對(duì)單位與絕對(duì)相位
傳統(tǒng)pc端網(wǎng)頁設(shè)計(jì)中,設(shè)計(jì)師給出的視覺元素大小的衡量單位通常是以css中的px為單位的。我們也從來不去關(guān)心一px到底有多長,只要按照設(shè)計(jì)師給出的px大小編寫css代碼即可。所以很多前端開發(fā)認(rèn)為px是絕對(duì)單位,甚至很多css書籍中也簡單的告訴我們px是絕對(duì)em、ex、單位百分比是相對(duì)單位。
而實(shí)際上除了pt之外其他都是相對(duì)單位,關(guān)于pt這個(gè)單位我除了在《css權(quán)威指南》種有見過外,其他css書籍從未提到。pt在css單位中屬于真正的絕對(duì)對(duì)單位,1pt = 1/72(inch),inch及英寸,而1英寸等于2.54厘米。
那么px到底是什么?
px實(shí)際是pixel(像素)的縮寫,根據(jù) 維基百科的解釋,它是圖像顯示的基本單元,既不是一個(gè)確定的物理量,也不是一個(gè)點(diǎn)或者小方塊,而是一個(gè)抽象概念。所以在談?wù)撓袼貢r(shí)一定要清楚它的上下文!一定要清楚它的上下文!一定要清楚它的上下文!
不同的設(shè)備,圖像基本采樣單元是不同的,顯示器上的物理像素等于顯示器的點(diǎn)距,而打印機(jī)的物理像素等于打印機(jī)的墨點(diǎn)。而衡量點(diǎn)距大小和打印機(jī)墨點(diǎn)大小的單位分別稱為ppi和dpi:
ppi:每英寸多少像素?cái)?shù),放到顯示器上說的是每英寸多少物理像素及顯示器設(shè)備的點(diǎn)距。
dpi:每英寸多少點(diǎn)。
關(guān)于打印機(jī)的點(diǎn)距我們不去關(guān)心,只要知道 當(dāng)用于描述顯示器設(shè)備時(shí)ppi與dpi是同一個(gè)概念 。
CSS像素的真正含義
由于不同的物理設(shè)備的物理像素的大小是不一樣的,所以css認(rèn)為瀏覽器應(yīng)該對(duì)css中的像素進(jìn)行調(diào)節(jié),使得瀏覽器中 1css像素的大小在不同物理設(shè)備上看上去大小總是差不多 ,目的是為了保證閱讀體驗(yàn)一致。為了達(dá)到這一點(diǎn)瀏覽器可以直接按照設(shè)備的物理像素大小進(jìn)行換算,而css規(guī)范中使用"參考像素"來進(jìn)行換算。
1參考像素即為從一臂之遙看解析度為96DPI的設(shè)備輸出(即1英寸96點(diǎn))時(shí),1點(diǎn)(即1/96英寸)的視角。它并不是1/96英寸長度,而是從一臂之遙的距離處看解析度為96dpi的設(shè)備輸出一單位(即1/96英寸)時(shí)視線與水平線的夾角。通常認(rèn)為常人臂長為28英寸,所以它的視角是(1/96)in / (28in * 2 * PI / 360deg) = 0.0213度。
由于css像素是一個(gè)視角單位,所以在真正實(shí)現(xiàn)時(shí),為了方便基本都是根據(jù)設(shè)備像素?fù)Q算的。瀏覽器根據(jù)硬件設(shè)備能夠直接獲取css像素
設(shè)計(jì)師的設(shè)計(jì)稿
CSS網(wǎng)頁開發(fā)的目的就是還原設(shè)計(jì)師的設(shè)計(jì)稿,pc時(shí)代的前端開發(fā)者不需要去了解CSS像素的來龍去脈,只需要按照設(shè)計(jì)師的標(biāo)注用css還原即可,而且設(shè)計(jì)稿的長度單位跟設(shè)備的顯示單位一致。
然而隨著移動(dòng)時(shí)代的發(fā)展,不同尺寸不同設(shè)備分辨率,相同尺寸下不同分辨率。為了在各式各樣的手機(jī)屏幕上有一致的視覺,甚至是同一份設(shè)計(jì)稿要同時(shí)在native和移動(dòng)web上使用,設(shè)計(jì)稿需要定一個(gè)設(shè)計(jì)標(biāo)準(zhǔn),即設(shè)計(jì)稿的大小和視覺元素的長度單位,然后在各個(gè)設(shè)備上做適配。
dpi、ppi、dip、分辨率、屏幕尺寸、設(shè)備像素、css像素、設(shè)備像素比
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26