手机页面布局方案有好多种，但不管你怎样做，都需要用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，很可能在你输入第一个字符之前，你连输入框都看不见。
在手机上，只要有输入框的地方，受限就很大。
其实我也没有什么好的解决方案，只是来吐槽的。。有没有好的经验分享给我看看呀
