移動端佈局單位介紹之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中能夠用變量，這樣咱們能夠省去頻繁用計算器的時間了。