移動端的適配

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頁面的終端適配