本文主要寫給剛接觸移動端開發的同行們。
首先先將幾個主要概念講一下；
什么是移動端？
：移動端故名思義是為移動終端，大名叫移動通信終端，是指可以在移動中使用的計算機設備。其實就是我們常說的手機。
什么是布局？
：對事物的全面規划和安排，布：陳設；設置。前端開發中布局也就是將主要的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，等問題了。
當然如果你用百分比布局的話，那也可以。