CSS+HTML+flexible.js+rem實現屏幕縮放適配概念原理解釋

首先理解幾個概念：

（1）屏幕尺寸：屏幕對角線的長度，通常用英寸表示，1英寸=2.54cm。

（2）dp（（或者叫dip）：設備獨立像素，也就是設備屏幕上多少個點。

（3）dpi：印刷行業術語，像素密度，是每英寸上像素點數

（4）ppi：屏幕像素密度，即每英寸(1英寸=2.54釐米)彙集的像素點個數，這裏的一英寸仍是對角線長度，pixels per inch

（5）dpr：一個px用多少個像素點來顯示，iPhone引入了視網膜屏幕的概念，一般來講就是屏幕的點很小，一個像素能夠用多個點來渲染，畫面更清晰。

　　　　設備像素比 = 設備像素 / 設備獨立像素。指CSS邏輯像素對於物理像素的倍數

 

 （6）設備像素(又稱爲物理像素)：指設備能控制顯示的最小物理單位，意指顯示器上一個個的點。從屏幕在工廠生產出的那天起，它上面設備像素點就固定不變了，

　　　和屏幕尺寸大小有關，單位 pt（點（傳統長度單位）爲1/72英寸=0.35mm））

（7）設備獨立像素(也叫密度無關像素或邏輯像素)：能夠認爲是計算機座標系統中得一個點，這個點表明一個能夠由程序使用的虛擬像素(好比: css像素)，這個點是沒有固定大小的，

　　　越小越清晰，而後由相關係統轉換爲物理像素，設備無關像素（Android長度單位），等同於CSS邏輯像素

（8）分辨率：寬度上和高度上最多能顯示的物理像素點個數

（9）css像素(也叫虛擬像素)：指的是 CSS 樣式代碼中使用的邏輯像素，在 CSS 規範中，長度單位能夠分爲兩類，絕對(absolute)單位以及相對(relative)單位。

　　　px 是一個相對單位，相對的是設備像素(device pixel)

（10）公式：PPI=分辨率/屏幕尺寸。

　　　　　　屏幕尺寸固定，分辨率越高，PPI就越高。

　　　　　　分辨率固定，屏幕尺寸大了，PPI就越少。

　　　　　　PPI不變，屏幕尺寸變大，分辨率越大。

（11）1920x1080：是指屏幕水平方向有1920的像素點，垂直方向有1080個像素點，你們能夠估算一下，1920x1080約爲200w，也就是說這塊屏幕有將近200w個像素點。

　　　這裏說的像素點實際上不是真正意義上的點，它是有面積的，也能夠叫作像素塊

　　　屏幕與圖片的分辨率要相匹配才能達到最佳的顯示效果。當圖片的分辨率小於屏幕的分辨率時，在全屏顯示的狀況下圖片會顯得較爲模糊。

　　　當圖片的分辨率高於屏幕的分辨率時，在全屏顯示的狀況下效果也很差。 　

 

---

 

---

 

 rem+flexible.js適配

rem： rem屬性指的是相對於根元素設置某個元素的字體大小。它同時也能夠用做爲設置高度等一系列能夠用px來標註的單位。

　　　flexible.js正是利用rem單位相對根元素

　　　而咱們須要作的就是根據不一樣的屏幕算出html的font-size，

　　　而頁面內的大小單位都根據rem來寫，從而實現了自適應。

　　　rem就是相對於根元素的font-size來作計算。而咱們的方案中使用rem單位，是能輕易的根據的font-size計算出元素的盒模型大小。