最簡單的移動端適配方案

目前最流行的方案當屬淘寶的flexible了，由於以前一直作服務端開發，對前端不是很瞭解。對於這套方案看了n久仍是不太理解，後來本身學習viewport的相關概念，捉摸出一套本身的辦法（至少我沒查到有人這麼幹的...），寫在這裏和你們分享一下

其實對於多數的移動h5的適配需求並無那麼繁瑣，只要保證和設計稿比例一致，在各類奇葩屏幕都可以顯示出完整的信息就能夠了。因此這裏不討論retina屏幕圖片模糊問題，只考慮適配

需求：

1. 經過設計稿各類標註，解決css中尺寸和單位問題
2. 保證各類手機可以完整顯示內容，比例和設計稿一致
3. 若是但願作retina適配，多一步計算dpr並按需加載圖片就好了

假定設計稿爲750px

方案一：

必備知識：rem
在html中設置font-size爲10px，那麼1rem就爲10px，因此想表示寬度爲100px的div那就用10rem

• 獲取手機屏幕真實寬度：

window.innerWidth;

• html的font-size：

var rem = window.innerWidth/750;

這裏須要說明一下，除以750是除以設計稿的寬度。設計稿中的1px換作其餘屏幕中就是 其餘手機屏幕尺寸的1/750，也就是1rem。

• 動態設置rem大小

var docEl = document.documentElement;
var fontEl = document.createElement('style');
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px;}';

這個時候就盡情玩耍吧，100px就寫做100rem，字體的話也直接寫rem。

方案二：

首先要理解viewport的概念，能夠參考這篇文章，寫的很詳細文
移動前端開發之viewport的深刻理解。總結下來就是viewport在移動端是可變的，咱們把這個叫作layout viewport。默認都比手機的屏幕大不少（多數都是980px）。若是什麼都不設置，咱們的px都是相對於這個layout viewport而言的。因此正常狀況下咱們在手機上看pc的頁面都是看不全的，可是各個手機廠商的作法不太同樣，有的就是看不全了，只顯示一個角落，可是例如iphone這種就會對頁面進行縮放，讓整個pc頁面都擠進你的小屏幕中，因此看到的字體或者圖片自己也就小了。若是仍是不明白呢也不要緊。按照下面的作法作就能夠了。

以前提到全部的px都是相對layout viewport而言的，750的設計稿中100px是相對750px寬度，若是讓手機也認爲本身的layout viewport是750px，那麼全部的尺寸換算就交給系統本身完成就好了。因此：

<meta name="viewport" content="width:750,user-scalable=no"/>

設置好以後，按照設計稿元素尺寸直接寫100px就是想要的效果了

總結：
以上就是我對移動端處理的辦法，簡單並且有效。不須要複雜的js代碼，不用less，scss也能正常使用。若是要說缺點的話也就是隨着屏幕尺寸增大或者縮小，字體也會隨着增大縮小，並不會像淘寶那種在視覺感官上的大小不變，不過我以爲對於絕大多數的h5頁面是不必這麼作的。

由於是剛剛轉作前端，說的不對的地方還請多多指出，謝謝！ 另外，始終不太理解淘寶對於字體大小不變的方案是怎麼解決的，若是可以用簡單的幾句話講明白這個原理但願能告知下哈！