1.固定寬度
頭部設定
<meta name="viewport" id="viewport" content="width=640,user-scalable=0, target-densitydpi=320">
，意思為根據設計稿的大小（640px），以320(iphone5)為基準進行縮放，此方法簡單粗暴高效，在後面的css樣式中只需要根據設計稿的實際大小，根據px來寫即可，可完美自適應大小不同的螢幕。
這種方法目前見到的缺點有：

1. 縮放會導致有些頁面元素會糊的情況。
2. 如果此頁面有可能巢狀在別的系統或者頁面中，如果上層頁面width=device-width就會整個錯亂。
3. 在微信中如果需要識別二維碼，會識別不出來。
4. （歡迎補充）

2，使用rem適配
rem是根據根元素(html)font-size的大小計算出來的
例如設定html{font-size: 10px }那麼1rem=10px;
設定html{font-size: 20px }那麼1rem=20px;
這樣我們只需要改變根元素html的font-size大小縮放頁面。
改變根元素font-size大小的方法。
1. 媒體查詢
一般我們在做web app都會先統計自己網站有哪些主流的螢幕裝置，然後去針對那些裝置去做media query設定也可以實現適配。
如下所示

html{
    font-size:12px;
}
@media only screen and (min-width: 371px){
    html {font-size: 14px !important;}
  }
  @media only screen and (min-width: 401px){
      html {font-size: 15px !important;}
  }
  @media only screen and (min-width: 428px){
      html {font-size: 16px !important;}
  }
  @media
 
 only screen and (min-width: 481px){
      html {font-size: 16px !important;}
  }
  @media only screen and (min-width: 569px){
      html {font-size: 17px !important;}
  }

如果設計稿寬度為640，那麼對應的是html{font-size:12px;}那麼設計稿的大小/2/12為你需要的rem的大小。
例如：設計稿btn的寬度為48px，高度為24px,字型大小為24，那麼在程式碼中對應為
.btn{
width: 2rem;
height: 1rem;
font-size: 1rem
}

2.使用js控制根元素font-size大小

<script>
      (function (win,doc){
        if (!win.addEventListener) return;
        var html=document.documentElement;
        function setFont()
        {
          var cliWidth=html.clientWidth;
          html.style.fontSize=100*(cliWidth/750)+'px';
        }
        win.addEventListener('resize',setFont,false);
        setFont();
      })(window,document);
    </script>

媒體查詢可以實現固定幾個螢幕大小的適配，而js可以實現所有的適配。
如引用上面的程式碼，設計稿大小為750，如果為640 將html.style.fontSize=100*(cliWidth/750)+'px';中750改為640
在這裡1rem=50px；
例如在寬度為750的設計稿中btn的寬度為100px，高度為50px,字型大小為30px那麼對應的css為
.btn{
width: 1rem;
height: 0.5rem;
font-size: 0.3rem
}
此處以375螢幕（iphone6）為基準，設計稿為實際尺寸的2倍，所以設計稿大小/2/50為你所需要的rem大小。
注：chrome預設最小限制字型為12px。
第一次寫部落格，如有錯誤，請指出並多多包涵。