淺談移動端適配-rem

    對於移動端開發來講，無可避免的就是直面各類設備不一樣分辨率和不一樣DPR（設備像素比）的問題，在此忽略其餘兼容性問題的探討。

  一. 移動端開發有關於像素的概念：

        1.設備像素(dp)，也叫物理像素。指設備能控制顯示的最小物理單位，意指顯示器上一個個的點。從屏幕在工廠生產出的那天起，它上面設備像素點就固定不變了。

        2.分辨率，屏幕上物理像素的數量。

        3.設備獨立像素(dip)，又稱密度無關像素。能夠認爲是計算機座標系統中的一個點，這個點表明一個能夠由程序使用並控制的虛擬像素。由相關係統轉化爲物理像素在設備上體現。

        4.css像素，web編程中的概念，屬於設備獨立像素中的一種，獨立於設備，屬於邏輯上衡量像素的單位。

        5.設備像素比(dpr) = 設備像素值(dps) / 設備獨立像素值(dips)，表明系統轉化時一個css像素佔有多少個物理像素。

        6.像素密度(ppi)，設備（屏幕）每英寸內有多少個像素點。

  二. 移動端的視口：

        移動端視口viewport（div100%時的css大小）：移動設備上的viewport就是設備的屏幕上能用來顯示咱們的網頁的那一塊區域，可能與瀏覽器的可視區域不一樣。默認比瀏覽器可視區域要大，這也是爲何通常的PC端網頁放在移動端會出現橫向滾動條的緣由。

移動端中的三個不一樣的可視區域大小，來自於ppk關於移動設備的viewport研究:

        1.佈局視口（layout viewport），瀏覽器默認的viewport，通常比瀏覽器可視區域大。

        2.視覺視口（visual viewport），瀏覽器的可視區域大小（瀏覽器的可見區域css像素值）

        3.理想視口（ideal viewport），設備的實際物理寬度（device-width)，是一種與ppi無關的設備原始的寬度（英寸），例如320px和660px下的iphone的理想視口都是320px。

    三.位圖像素

        一個位圖像素是柵格圖像(如：png, jpg, gif等)最小的數據單元。每個位圖像素都包含着一些自身的顯示信息(如：顯示位置，顏色值，透明度等)。

        理論上，1個位圖像素對應於1個物理像素，圖片才能獲得完美清晰的展現。當趕上對應的位圖像素與物理像素不統一的時候。

        1.位圖像素>物理像素。 1個位圖像素對應於多個物理像素，因爲單個位圖像素不能夠再進一步分割，因此只能就近取色，從而致使圖片模糊。（具體取決於設備系統的圖像算法，並非簡單的切割圖片）（圖片拉伸）

        2.位圖像素<物理像素.。 一個物理像素對應多個位圖像素，因此它的取色也只能經過必定的算法(顯示結果就是一張位圖像素只有原圖像素總數四分之一的圖片)，肉眼看上去雖然圖片不會模糊，可是會以爲圖片缺乏一些銳利度，或者是有點色差(但仍是能夠接受的)（圖片擠壓）

    四.rem適配

        什麼是rem：即以根節點（html）的字體大小做爲基準值進行長度計算。

        當咱們進行移動端開發時，若是使用px做爲單位的話，咱們很難在不一樣大小的屏幕上，經過固定的px來達到適配。可是若是咱們統一使用rem做爲計量單位，在不一樣的設備下經過改變根節點字體大小來總體低改變頁面元素的佈局及大小，無疑會是適配變得簡單許多。rem與em相比沒有複雜的對比傳遞，因此計算值顯得更加簡單，也更適合做爲進行移動端開發的計量單位。

        那咱們如何修改不一樣設備下的根節點的字體大小來達到適配呢？下面有個經常使用的代碼塊

 

        經過上面代碼對根節點的大小進行更改以後，咱們在css中只須要將設計稿種的100px 寫成1rem，同理其它都進行 / 100 的轉換就能夠完成r移動端頁面的適配了。

    五.移動端高清適配

        在上面咱們介紹了有關於dpr與位圖像素的知識，實際上是爲了後面講述爲何要進行高清適配及如何達到高清適配。（解決1px問題，圖片的高清適配）

        上面咱們介紹 設備像素比(dpr) = 設備像素值(dps) / 設備獨立像素值(dips)，當咱們趕上dpr爲2時，以iphone 6爲例，此時一個css像素（web上的設備獨立像素）將對應兩個物理像素（設備像素值），也就是說 1px = 2pt，那麼以肉眼來看咱們1px 就變成了兩像素。

 

 

        以上圖爲例，假設左邊爲1px在dpr爲1下顯示的效果，右邊爲1px在dpr爲2下顯示的效果，其實他們所佔的屏幕高度是同樣的，可是分別佔據了1個物理像素的高度和兩個物理像素的高度，因此在dpr爲2的時候，1px就變成了2px的效果，因此在設置border爲1像素時，根據不一樣設備咱們要設置不一樣的值，border-width: 1px / dpr。那麼如何是代碼根據不一樣的設備dpr進行自動的適配呢？

        此時用到了meta標籤

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

        width=device-width將咱們的網頁大小設置成移動設備的寬度（理想視口），好比在iphone 6下的網頁的寬度變成320px，恰好佔滿全面無縮放，無橫條。而設置init-scale則將會改變設備獨立像素（css像素），由於它是計算機虛擬的，因此能夠由系統控制，當init-scale爲2事，css像素變爲640px，此時網頁的寬度仍是等於device-width，佔滿全屏。

        設置事後咱們此時的dpr = 設備像素值(dps) / 設備獨立像素值(dips) = 1，此時1px = 1pt ，一個css像素將對應一個物理像素，因此咱們此時設置1px則顯示爲1px的顯示效果。

        那咱們如何修改不一樣dpr設備下的meta來達到自動適配呢？下面代碼來自網絡

 

 

 

 

 

 

 

    代碼比較多，有興趣的能夠在github上找到源代碼（https://github.com/hbxeagle/rem/blob/master/HD_ADAPTER.md）

    對應圖片而言，要想達到最清晰的顯示狀態則要使圖片的位圖像素與設備的物理像素一一對應，因此能夠對圖片作以下適配

 

 

    也就是在不一樣的dpr下設置不一樣的圖片資源地址，請求不一樣大小的圖片便可，寬高則繼續採用上面的rem適配代碼進行適配。此時要注意在html上加上dpr=1的屬性及屬性值，以便經過css屬性選擇器設置不一樣的圖片地址。

關於移動端rem的適配就先寫這麼多了，寫的有錯誤或者寫的不清楚的地方請你們多多指正，逃....