目前最流行的方案當屬淘寶的flexible了，因為之前一直做服務端開發，對前端不是很了解。對於這套方案看了n久還是不太理解，后來自己學習viewport的相關概念，捉摸出一套自己的辦法（至少我沒查到有人這么干的...），寫在這里和大家分享一下
其實對於多數的移動h5的適配需求並沒有那么繁瑣，只要保證和設計稿比例一致，在各種奇葩屏幕都能夠顯示出完整的信息就可以了。所以這里不討論retina屏幕圖片模糊問題，只考慮適配
需求：
- 通過設計稿各種標注，解決css中尺寸和單位問題
- 保證各種手機能夠完整顯示內容，比例和設計稿一致
- 如果希望做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頁面是沒必要這么做的。
因為是剛剛轉做前端，說的不對的地方還請多多指出，謝謝！
另外，始終不太理解淘寶對於字體大小不變的方案是怎么解決的，如果能夠用簡單的幾句話講明白這個原理希望能告知下哈！