移動端佈局單位介紹之rem

本文主要寫給剛接觸移動端開發的同鞋們。

首先先將幾個主要概念講一下；

什麼是移動端？

移動端故名思義是為移動終端，大名叫移動通信終端，是指可以在移動中使用的電腦設備。其實就是我們常說的手機。

什麼是佈局？

前端開發中佈局是將主要的html結構佈置好。

rem是什麼？

rem是一種長度單位，是而且僅是根據根元素html改變的長度單位。

Root em（REM）是CSS3中新定義的一種長度單位。和之前的em(根據父元素改變大小)單位相比在使用上具有明顯的優勢。著名的響應式web框架Fundation就是用REMs作為基本的長度單位。

接下來還有幾個重要的概念需要交代一下；

什麼是像素？

中文全稱為圖像元素。像素僅僅只是解析度的尺寸單位，而不是畫質。　　

定義：是指在由一個數字序列表示的圖像中的一個最小單位，稱為像素。

物理像素：一個物理像素是顯示器(手機屏幕)上最小的物理顯示單位，在操作系統的調度下，每一個設備像素都有自己的顏色值和亮度值。

設備獨立像素：設備獨立像素(也叫密度無關像素)，可以認為是電腦坐標系統中得一個點，這個點代表一個可以由程式使用的虛擬像素(比如: css像素)，然後由相關係統轉換為物理像素。

設備像素比： 設備像素比(簡稱dpr)定義了物理像素和設備獨立像素的對應關係，設備像素比 = 物理像素 / 設備獨立像素；

在javascript中，可以通過window.devicePixelRatio獲取到當前設備的dpr。

在css中，可以通過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進行媒體查詢，對不同dpr的設備，做一些樣式適配(這裡只針對webkit內核的瀏覽器和webview)。

如果設備寬高是375X667 DPR為2的話，其物理像素就要相應的乘以2，也就是為750X1334；

這時候如果你設置的css像素為1px，那麼在此設備上顯示的就為2px。（這就是經典的移動端一像素問題，下麵有解決方案）這對於佈局來說會造成問題。所以我們要將它統一起來。這個統一也必須是動態的。那麼我們怎麼去動態改變呢？

答案是通過視口設置寬高縮放。

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

當然這是靜態設置的，一旦換個DPR不同的設備就又會造成多1像素的問題。那麼我們要怎麼設置不同DPR的不同縮放比呢。

我們目標是，DPR為2的時候，initial-scale=0.5 ,DPR為3的時候，initial-scale=0.33333333。

相信大家都知道javascript，通過javascript我們可以動態的設置初始縮放。

首先我們要獲取dpr，在javascript中是通過： window.devicePixelRatio;來獲取的。那麼我就開始動態設置吧。

移動端1px解決方法：

<script>
/* 此腳本寫在html的head標簽中 */
var pixel = 1/window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width,initial-scale='+pixel+','+'minimum-scale='+pixel+','+'maximum-scale='+pixel+'">')
</script>

ok，到這我們就解決了1px的問題。

接下來我們就要解決佈局單位的問題了；

首先我們知道佈局單位有很多：

px：用這個佈局的話，寫出來的大小隻能和設計稿上的一樣了。一旦換個終端就GG了。所以這種單位不用考慮了。

%；百分比佈局還是可以使用的，但如果是高度不確定的話就不適合了。

em：相對於父級，是個相對元素，一旦你要設置字體大小而又寬高不能統一，麻煩就來了。

rem:也是個相對元素，不過它只相對於根元素也就是html，用這個作為佈局單位能做到適配各種終端，當然前提是動態改變了根元素的font-size.

所以如果你要做的適配大部分的手機終端，那麼rem是個佈局的好單位。前提是動態設置了html的font-size大小。讓他隨設備的改變而改變.

那我們要怎麼動態改變呢，首先我們要獲取當前設備的寬度，用它去除以一個常數，這樣我們設置出來的font大小就是相對來說不變的。

獲取寬度可以通過javascript：getBoundingClientRect().width;

<script type="text/javascript">
    var html = document.querySelector('html');
    var width = html.getBoundingClientRect().width;
    html.style.fontSize = width/16 + 'px';
</script>

進行佈局的話建議用less去寫，因為less中可以用變數，這樣我們可以省去頻繁用計算器的時間了。