移動端佈局單位選擇之rem

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

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

　　　　什麼是移動端？

　　　　　　：移動端故名思義是爲移動終端，大名叫移動通訊終端，是指能夠在移動中使用的計算機設備。其實就是咱們常說的手機。

　　　 什麼是佈局？

　　　　　　：對事物的全面規劃和安排，布：陳設；設置。前端開發中佈局也就是將主要的html結構佈置好。

　　　　rem是什麼？

　　　　　　：R.E.M.是一支於1980年組建於美國的另類搖滾樂團....固然咱們這裏的rem不是指這個樂團了。

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

　　　　　　　　Root em（REM）是CSS3中新定義的一種長度單位。和以前的em單位相比在使用上具備明顯的優點。著名的響應式web框架Fundation就是用REMs做爲基本的長度單位。

好，有了這幾個共同的概念溝通起來就簡單多了，要否則別人一看，嘿，佈局？用rem?什麼鬼，用樂團佈局?城會玩啊。。。

    　　來，喝完這杯還有一杯。接下來還有幾個重要的概念須要交代一下；

　　　　什麼是像素？

　　　　　　　　：中文全稱爲圖像元素。像素僅僅只是分辨率的尺寸單位，而不是畫質。　　

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

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

　　　　　　設備獨立像素：設備獨立像素(也叫密度無關像素)，能夠認爲是計算機座標系統中得一個點，這個點表明一個能夠由程序使用的虛擬像素(好比: 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咱們能夠動態的設置初始縮放。那麼 how？？

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

　　　　　　　　　　　　　　

　　　　　　　　　　　　　　代碼我在這寫一遍方便我們複製;

　　　　　　　　　<script>

　　　　　　　　　　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;

　　　　　　　　

　　　　　　　　相信這段代碼很簡單，我就不寫一遍了。

　　　　　進行佈局的話建議用less去寫，由於less中能夠用變量，這樣咱們能夠省去頻繁用計算器的時間了。

　　　　　　　　less中咱們能夠這樣寫；

　　　　　　　　　　　　@rem:40rem;  定義變量@rem 這裏的40是指你打開谷歌開發者工具後點擊移動端模擬時的html的font-size大小。

　　　　　　　　　　　div{

　　　　　　　　　　　　width:200/@rem;   less會在編譯的時候給計算出結果。

　　　　　　　　　　}

　　　　　　OK，到此咱們的佈局問題差很少就解決了。

　　　　　　　　總之，在head裏寫上這兩段代碼就解決了適配，1px，等問題了。

　　　　　　　　固然若是你用百分比佈局的話，那也能夠。