浅谈 web app 的几种适配方法感想

移动端越来越火，特别是基于微信开发的web，今天就来捣鼓捣鼓web app适配不同大小手机屏幕的几种方法以及感想，如有错误和不足，望大虾指正

1.响应式：

响应式比较出名的一个框架bootstrap，bootstrap是一个“ 组件化” 的框架，快速建站，但是组件化的框架都有一个缺点，设计受到限制，必须和组件类似，否则实现极其复杂，不断的样式层叠会让你崩溃，但是可以实现web page 到web app 的一步到位，节约成本，视觉体验较差，不推荐。

2.流式布局：

这是目前比较流行的一种布局，使用百分比布局，固定高度，可以适应各个大小的屏幕，但是问题来了，文字如何适应，当然可以用媒体查询适配，但是也只是粗糙的适配，除此之外，高度固定，在大屏幕手机看起来感觉就像是被拉长一样，对于精致的web app来说这是致命的。一个固执的设计师无法接受这样的缺陷。

3.viewport缩放： ps：简单粗暴，由于见识不足，还没发现这个方法的坑，有大虾发现望指教交流

  viewport缩放的做法就是固定宽度固定大小，然后用viewport进行自适应缩放。当然，想到缩放大家可能就会想到一个缺点，图片失真，但是这个问题非常容易解决，只要把设计稿切图片稍微切高清一点，图片大小并不会差别很大，这样就解决了，可能这也是我能发现的唯一一个缺点了。使用方法：
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">  //以320为基准，最大方法1.3倍,ps：简单，粗暴，有效，推荐

4。使用rem单位：

rem是一个相对单位，相对于html的font-size大小的相对单位，比如html的font-size：12px; 那么1rem就等于12px；width和height等等全部用rem来做单位，只需要改变html的font-size就可以改变整个网页所有元素的大小，包括字体高度宽度等。和viewport实现的效果一样，整体放大缩小使用方法：

font-size的初始值为12px;

适配某个屏幕的font-size值=（屏幕的宽度/font-size等于12时web的宽度）*12px;

ps:只需要监控window的change时间设计font-size就可以实现适配所有分辨率的手机，简单.粗暴.快捷。推荐