手機頁面布局方案有好多種，但不管你怎樣做，都需要用viewport, viewport就不在這談了。
rem布局，rem布局的優勢主要是可以通過動態改變html根節點(document.documentElement)的font-size縮放整個應用，比較適合web app,web app最好能保持app各元素的大小比例.設計稿的大小選型就很重要了，選了iphone5這樣的低分辨率出設計稿，在大屏手機上看就顯得很大很大，尤其是屏幕大，分辨率卻不高的手機。
寬度用百分比，高度固定，這種方案最常見，最在pc和大屏幕手機上看，有些元素顯得很長，橫向被拉伸。對于文章閱讀的網站最適合不過了，大的屏幕就應該能容納更多的文字才是合理的，頁面元素本就不多，核心是文章內容。
上面只說了頁面元素的單位應該怎么定。還是沒說布局，布局也有兩種，最主要的是自上而下的布局，此種布局對于網頁的適配非常方便，用戶體驗也好，除非你希望你的什么東西都出現在第一屏，新浪微博的h5手機頁面就采用了頂部導航，下面是滾動的內容的設計，體驗蠻好。淘寶h5頁面，做得則像淘寶的app,體驗也爛，h5版的淘寶反正本就沒什么人用。底部導航在手機上非常致命,如果你用fixed定位,要加各種占位元素，防止被底部導航擋住，fixed本就惡心。界面之間的過渡動畫也不好弄，fixed脫離了父節點的布局流，如果切換到一個有著完全不同的底部導航的頁面，動畫的同步將很成問題，各種蛋疼。
flexbox可以很好地分配屏幕空間,底部導航欄也可以跟隨父節點"運動"了，再在分配的部分空間內滾動，是非常合適的，看起來很美好，卻有一個致命的缺點，當你的頁面有輸入框，輸入法出來的時候，可分配的總空間變小了，完蛋了，可能有些地方混亂了。。。。。。根據經驗，手機上的輸入框還是放在單獨一個頁面的頂部比較好，下方最好什么東西也不要放，要不然在各種不同手機上的輸入體驗將會很不一致，如果是用了第三方輸入法的iphone，很可能在你輸入第一個字符之前，你連輸入框都看不見。
在手機上，只要有輸入框的地方，受限就很大。
其實我也沒有什么好的解決方案，只是來吐槽的。。有沒有好的經驗分享給我看看呀
