移動適配知識體系

1.PX是Pixel的縮寫，,pixel即像素,px是就是一張圖片中最小的點（點能夠很大，能夠很小），它不是天然界的長度單位。 一般開發中所說的px就是指邏輯像素。px 只有與設備物理像素一併討論，纔有相似「大小，長度」的概念

 

2.PPI是Pixels Per Inch縮寫，pixels per inch所表示的是每英寸所擁有的像素（pixel）數目。ppi=對角線上的像素個數/屏幕尺寸（屏幕的對角線長度，使用英寸表示，1in=2.54cm） 這裏所說的 pixels 是與英寸(物理單位)討論的 。（一條斜線上能擠得下多少個點）

 

3.dpr=物理像素/邏輯像素.物理像素就是屏幕分辨率中所示的像素就是物理像素。邏輯像素，就是咱們在css中使用的像素。例如在iPhone6中，咱們一個邏輯像素在iPhone中呈現的時候，實際佔領了兩個物理像素，因此dpr=2； 在js中咱們經過document.documentElement.clientWidth獲取屏幕的邏輯像素，那麼咱們就能夠經過邏輯像素*2=物理像素。

 

4.dppx：每一個css像素包含物理像素數（舉例子：drp=2 1個px邏輯像素(1*1) =4個物理像素(2*2)） dppx能夠看做devicePixelRatio（設備像素比，簡稱DPR）的單位，儘管DPR自己並不須要單位

 

術語：

瀏覽器窗口 ：設備屏幕多大，瀏覽器窗口就多大（PC顯示器、移動設備）

自適應：頁面內容「相對性的達到合理的展現

適配：保持統一效果的等比縮放（看起來差很少）

 

語錄:

在手機上，視口與移動端瀏覽器屏幕寬度再也不關聯，而是徹底獨立的了。

這個視口，叫佈局視口，css佈局會根據它來計算，並被它約束。佈局視口寬度也就是body的寬度

 

 淘寶頁面例子：http://huodong.m.taobao.com/act/yibo.html

 

很好的文章：

https://blog.csdn.net/xiaxiaoxian/article/details/79395694
http://caibaojian.com/flexible-js-2.html 要理解這個表格的關係哦

https://segmentfault.com/a/1190000008767416

https://blog.csdn.net/sinat_17775997/article/details/60112351

https://www.jianshu.com/p/985d26b40199 （IPCC-H5就是用這個方案）