遇到的問題：如何適配不同的手機螢幕。
簡單的說media query可以解決一部分。但是media query目前是照著iphone5/iphone/iphone6s 三個不同尺寸來進行。
如果手機尺寸不在這三個範圍之內，那麼元素的寬度可以按照百分比來處理，但是高度就不行了。
比如就會出現在輪播圖的情況下，原來的高度是寫死如iphone5 200px;iphone6 250px;iphone 6s 300px;
如果手機不在這三個尺寸的範圍內就會出現輪播圖失真的情況。
於是對於所有的不同尺寸螢幕會有不同的寬度、高度和字型的頁面元素，都使用rem的方式來處理。

• 什麼是rem

  rem是一個相對頁面根元素，也就是html元素的font-size 大小來宣告的一個值。詳細的百度吧，不做重複工作。
  比如我在html中定義
  font-size:10px;
  在一個body下定義一個div的樣式
  ｛height:2rem;width:4rem;font-size:1.2rem}
  那麼實際效果就是

｛height:20px;width:40px;font-size:12px}

• 怎麼去做多螢幕適配

  把螢幕尺寸的寬度設定成當前螢幕寬度／10；
  比如iphone5 就設定html｛font-size:32px} 200px 高度就變成了 height：6.25rem
  具體實現如下（參考程式碼中的common.js和style.css）

html{
    font-size: 32px;
    width: 100%;
    height: 100%;
}
@media only screen and (min-width: 375px){
    html {
        font-size: 37.5px;
    }
}
@media only screen and (min-width: 414px){
    html {
        font-size: 41.4px;
    }
}
body{
   font-size: 12px;／＊記得要把body font－size預設值設回來 不然就預設字型就變成32px啦＊／
}
 

//重新計算html的字型大小保證使用rem進行設定高寬

var basefontsize =window.screen.width/10+"px";
if($("html").css("font-size")!=basefontsize){
   $("html").css("font-size",basefontsize);
}

關於字型

所有字型如果不隨螢幕大小變化情設定成指定的px

引申出來的百分比佈局

比如要做一個1:4的縱向佈局。第一個div寬度設定成2rem 第二個設定成8rem 這樣總共寬度加起來就是10rem＝320px（iphone下），剛好就是1:4的佈局有木有很簡單

這樣就可以愉快的使用rem來設定元素的寬和高來保證不通螢幕的適配了