移動端H5解惑-概念術語（一）

時間 2019-11-07

標籤移動 h5 解惑概念術語欄目無線简体版

原文原文鏈接

本文原文發表於2016年個人github，可是直到如今爲止還有不少童鞋問我相關概念，因而整理下再分享一下。javascript

原文連接：github.com/sunmaobin/s…css

物理像素（physical pixel）

也叫作：設備像素（device pixel）。html

能夠理解爲屏幕上的點，這個是跟硬件有關係，跟Web軟件語言沒一毛錢關係。java

你見過霓虹燈嗎？LED燈？對！就是那上面一個個會發光的顆粒。git

這個概念你們通常喊中文，貌似沒見過縮寫（固然你能夠叫它：pp），由於在軟件方面咱們不多關注硬件嘛！天然這個概念也就沒多大用啦！github

分辨率（resolution）

這也是一個物理概念，其實就是指一個設備上橫豎的點數。web

好比：一個LED燈上面，橫着放3個燈泡，豎着放4個燈泡，那麼這個LED設備的分辨率就是：3 x 4。編程

固然對應到PC上的顯示器上，或者手機端的屏幕行，這一個個的小點，就不是燈泡啦，而是一種新型的發光原件，並且因爲排列密集，因此你肉眼根本看不見具體的一個個的點啦而已。瀏覽器

舉個栗子：iphone

iPhone手機的主屏：4.7英寸1334x750，就是指：對角線4.7英寸長，高1334個物理像素數，寬750個物理像素數。

CSS像素（css pixel）

是Web編程的概念，指的是CSS樣式代碼中使用的邏輯像素（或者叫虛擬像素）。

而咱們知道，軟件的開發離不開硬件的支持，就好比你要在瀏覽器看到顯示效果，就得瀏覽器支持你呀！

在CSS規範中，長度單位能夠分爲絕對單位和相對單位，好比：px 是一個 相對單位 ，相對的是 物理像素（physical pixel），這也就是說到底咱們日常開發中的 1px 在每一個屏幕上怎麼顯示，徹底取決於這個設備！

因此，問題就來了，到底CSS像素如何在硬件設備的物理像素上顯示呢？往下看。

先糾正一個概念（dips）

有些人把 CSS像素 又叫作 設備無關像素（dips）（好比：這裏），又說這個概念跟真正的 dip/dp 不是一回事！真實氣憤！就是這個概念的含糊不清，搞的我也頭暈目眩的。
這裏糾正一下，之後你們說到 設備無關像素 就是指 dip/dp ，是我下文專門有一節講述的概念，它就是以 160ppi 爲基準的一個相對單位，用來解決Android上面屏幕不統一問題的。
其他的說法，就是 物理像素 和 CSS像素，分別表明 硬件 和 軟件的單位，別再搞錯了。

捅破這層窗戶紙

在之前的顯示設備上，一個物理像素就顯示一個CSS像素，這沒什麼好爭議的，你們也理所固然的認爲該這麼處理，因而你們都在噪點中度過。

然而在2010年，搭載 Retina(高清屏) 的 iPhone4 出現了！也就是從這時候起，手機屏幕的競賽才真正開始啦，你們都爭先空後的朝着更大尺寸、更高分辨率的方向前進。

那麼 Retina 到底有什麼突破呢？原來，它增長了一倍的手機屏幕的物理像素，用2個物理像素點，顯示一個CSS像素。OMG，多麼有創意的想法！因而仍是原來的樣子，仍是那時的模樣，可是因爲屏幕點數增多了，因此看着就更加清晰啦。

沒有對比就沒有傷害：

看出來爲何上面的明顯比底下的清晰，噪點少嗎？由於它的網格更密集，其實也就是物理像素更多，可是CSS像素沒變（好比：蘋果的LOGO大小沒變，文字大小沒變）。

好了，弄明白了這點，咱們再往下看一些其它的概念。

設備像素比（device pixel ratio）

簡寫：dpr

公式：物理像素數（硬件） / 邏輯像素數（軟件），它是設備的屬性，而不是一個單位。

其實，比值就是前面說的 物理像素數除以 CSS像素數。

在javascript中，能夠經過 window.devicePixelRatio 獲取到當前設備的 dpr。

在css中，能夠經過 -webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio 進行媒體查詢，對不一樣dpr的設備，作一些樣式適配。

舉個栗子：

當 dpr=2 時，表示：1個CSS像素 = 4個物理像素。由於像素點都是正方形，因此當1個CSS像素須要的物理像素增多2倍時，其實就是長和寬都增長了2倍。

沒有對比就沒有傷害：

像素密度（pixers per inch）

簡寫：ppi，固然也叫作：dpi。

ppi pixers per inch，出現於計算機顯示領域（固然也是Android中的習慣叫法）
dpi dots per inch，出現於打印或印刷領域（固然也是iOS中的習慣叫法）

其實，從概念中你們也能知道，它表示了一種從邏輯單位到實際單位的換算。這句話怎麼理解呢？

由於你們在實際生活中，已經大致知道1米是多長，1斤是多重，而這種單位就是實際單位。

那麼我告訴你：我手機屏幕是4.7英寸的，你大概有點感受是吧？（1英寸=2.54釐米）！
可是若是爲告訴你：我手機屏幕是320像素的，你是否是就懵逼了？

因此，有了像素密度這個說法，你用英寸來講明屏幕尺寸是同樣的，不信，看看你能理解不？

個人iphone5屏幕上每2.54釐米上有320個小燈泡~（ppi=320）
個人iphone6屏幕上每2.54釐米上就有375個小燈泡呢！（ppi=375）

你是否是明顯以爲iphone6更亮！

記住：ppi 說的都是物理像素。

那麼，ppi 如何計算呢？由於行業內你們說的手機屏幕都是對角線，好比：4.7英寸，指的是手機屏幕對角線的長度（僅僅是顯示的屏幕哦，不包括邊框），你們都並無說手機的寬是多少英寸，高是多少英寸。因此，你計算 ppi 只能用對角線的物理像素數來除以對角線的實際單位啦。

那麼計算ppi，首先得計算出對角線的物理像素數，使用勾股定理，即：ppi = 根號下(1920平方+1080平方)/5.2 約等於 294。

那麼是否是ppi越大，越清晰呢？理論上是！可是，這得有個取捨。

沒有對比就沒有傷害：

2英寸1920x1080的主屏，ppi=765（瞎寫的）
4英寸1920x1080的主屏，ppi=382（YY的）
4.7英寸1920x1080的主屏，ppi=326（vivo x7）
5.2英寸1920x1080的主屏，ppi=294（HTC One）

來吧，感覺下2英寸上，給你放1920x1080個物理像素，是否是一團漆黑了？有人喜歡大屏，也有人喜歡小屏，因此嘛這個值只是個參考，你能夠對比相同尺寸下的ppi，可是千萬不要對比不一樣尺寸下的，這樣你會受傷的！

設備獨立像素（density-independent pixel）

也叫作：密度無關像素。

指Google提出的用來適配Android海量奇怪屏幕的，以前iOS沒有設備獨立像素一說，由於以前它的CSS像素都是320px，可是隨着iPhone6(375px)、iPhone6 Plus(414px)等不一樣手機型號出現，致使了手機上能看到的CSS像素點也增長的狀況下，也得考慮了。

簡寫：dips or dp

爲何Google提出這個概念能解決不一樣設備（或不一樣密度）下的顯示問題呢？
緣由是：不一樣的手機屏幕上 CSS像素 個數可能不同，雖然大多數是320px!

舉個栗子：

iPhone3GS，物理像素320，dpr=1，因此決定了它的CSS像素320；
iPhone4，物理像素640，dpr=2，因此，決定了它的CSS像素仍是320；

假如這時候咱們有個正方形是 30x30px，這是CSS像素，再上面的2個機器上看到的大小都同樣，只是在iphone4上更清晰些，由於它用4個物理像素顯示1個CSS像素。換句話說，若是你們都是手機都是320的CSS像素，那麼咱們就只管用 px 這個單位就能夠了，在每一個設備上的看到的大小都同樣。

若是在iphone5s以前，iOS都不須要關心這個概念，由於你能看到的手機屏幕的CSS像素都是320px。可是，隨着iPhone6/plus的出現，就讓咱們心塞了。

舉個栗子：

你有個 160px x 160px 的元素，在iphone5s下面看起來寬度正好是 半個屏幕 大小；
在iphone6plus下面，看起來寬度貌似只佔了屏幕寬度的 不到一半屏幕 大小！Why？由於人家像素數量多啊！

明白了嗎？就是因爲不一樣的設備屏幕，它所支持的屏幕顯示的 CSS像素 個數不一樣（跟物理像素無關），因此，咱們若是用 像素（px） 這個單位去WEB開發的話，在不一樣的手機下面就顯得元素不同大，這就是 dip 的做用，它的出現也就是爲了解決這個問題的。

那麼，dip 如何解決這個問題呢？

Google規定：ppi = 160時，1px = 1dip（dip在Android下面是一個單位哦！）那麼，咱們就能知道，像素數px = dip * ppi / 160

那麼，回到剛纔的那個栗子：

將 80px x 80px 的元素，單位換爲 80dip x 80dip ，在iphone5s下寬度是 163px x 163px（由前2行公式得，163px = 80 * 326 / 160）；
而這個元素在iphone6plus下，寬度是 207px x 207px（163px = 80 * 414 / 160）；

若是咱們使用 dip 做單位，那麼在2臺機器上，顯示出來的效果，差很少都等於2臺機器寬度的一半！目的就達到了。

另外，dip 做爲 單位 僅僅適用於Android，可是思想能夠用到 iOS 和 Windows 等平臺。好比：Windows中修改屏幕分辨率，其實修改的是 dpr ，又因爲物理像素不變，其實就等於修改了屏幕中 CSS像素 的個數，這也就是爲何修改了分辨率後，有些東西看着明顯變大或者變小的緣由了。

其它

設計稿

就是作UI的MM或者GG給你的PS或者切圖圖片或者標註圖片，拿着這個你就能夠開始照着勾勒頁面啦。固然，小公司可能沒有這一步，也許就是產品拿着Axure畫的原型直接輸出給你，讓你照着作頁面，那麼這個也就算是設計稿啦！至關於要求沒辣麼高啦。

負責輸出設計稿的崗位，叫：UI（User Interface 用戶界面）。

有些公司把設計稿也叫作：視覺稿 或者 高保真 圖。

交互稿

在大一些的公司，崗位分的可能更細，在開始作頁面以前，除了會輸出上面提到的 視覺稿 ，還會同時給你輸出一份具備動態效果示意的文件，通常多是 GIF 文件。主要是告訴你，頁面上某個元素的出現、消失等動畫效果。尤爲是作一些活動頁面，動畫要求多的，可能交互稿就頗有必要，否則不少時候，你作出來的效果，未必是產品須要的，那就尷尬了。

負責輸出交互稿的崗位，叫：UE（User Experience 用戶體驗），有的也叫 UX。

UE用的比較多的工具是：Adobe After Effects CC 2015。

移動端H5解惑-頁面適配（二）