移动端的适配

https://github.com/riskers/blog/issues/18

1. 固定高度，宽度自适应
   

   这也是目前使用最多的方法，垂直方向用定值，水平方向用百分比、定值、flex都行。腾讯、京东、百度、天猫、亚马逊的首页都是使用的这种方法。

   随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在哪个宽度需要调整的时候使用_响应式布局_调调就行（比如网易新闻），这样就实现了『适配』。

   原理

   这种方法使用了完美视口：

   <meta name="viewport" content="width=device-width,initial-scale=1">
   

   这样设置之后，我们就可以不用管手机屏幕的尺寸进行开发了。

2. 固定宽度，viewport缩放
   

   设计图、页面宽度、viewport width使用一个宽度，浏览器帮我们完成缩放。单位使用px即可。

   目前已知荔枝FM、网易新闻在使用这种方法。有兴趣的同学可以看看是怎么做的。

   原理

   这种方法需要根据屏幕宽度来动态生成viewport，生成的 viewport 基本是这样：

   <meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
   

   640 是我们根据设计图定下的，0.5 是根据屏幕宽度动态生成的。

   生成的viewport告诉浏览器网页的布局视口使用 640px，然后把页面缩放成50%，这是绝对的等比例缩放。图片、文字等等所有元素都被缩放在手机屏幕中。

3. rem做宽度，viewport缩放
   

   这也是淘宝使用的方案，根据屏幕宽度设定 rem 值，需要适配的元素都使用 rem 为单位，不需要适配的元素还是使用 px 为单位。

   具体使用方法见使用Flexible实现手淘H5页面的终端适配