rem單位大家可能已經很熟悉，rem是隨著html的字體大小來顯示代表寬度的方法，我們怎樣進行移動端響應式開發呢

瀏覽器默認的字體大小為16px 及1rem 等於 16px

如果我們想要使1rem等於 12px 只需設置html的字體大小為 12/16 及html的字體大小為font-size:75%

html {
font-size:75%; <!-- 12/16 -->
}

我們再來看一下各個瀏覽器的屏幕寬度

iphone4 320

iphone5 320

iphone6 375

iphone6p 414

大部分的安卓手機屏幕顯示寬度為 360

我們公司的設計是以iphone6為基礎設計的 及以375的為準設計的

如果想在 iphone其他版本中按iphone6比例自動縮放那麽我們需要進行簡單的縮放運算,同時也以1rem等於12px為例

iphone4 320/375*75% = 64%

iphone5 320/375*75% = 64%

iphone6 375/375*75% =75%

iphone6p 414/375*75% =82.8%

安卓 360/375*75% =72%

我們可以這樣設置在不同媒體中的字體的rem比例 由於安卓和iphone6區別較小，所以設置時忽略其差異

html {
  -webkit-text-size-adjust: none
 
;
  font-size:75%;
  height: 100%; }

@media screen and (min-width: 10px) and (max-width: 320px) {
  html {
    font-size: 64%; } }

@media screen and (min-width: 414px) and (max-width: 768px) {
  html {
    font-size: 82.8%; } }
/*字體大小 直接換算出10到20的字體大概代表多少rem 設置字體大小直接用class代替*/


.s10{font-size:0.83rem;}
.s11
 
{font-size:0.913rem;}
.s12{font-size:1rem;}
.s13{font-size:1.079rem;}
.s14{font-size: 1.162rem;}
.s15{font-size: 1.245rem;}
.s16{font-size: 1.33rem;}
.s17{font-size:1.411rem ;}
.s18{font-size: 1.5rem;}
.s20{font-size: 1.66rem;}

用心了解以上內容在應用rem中會得心應手

移動端使用rem同時適應安卓ios手機原理解析，移動端響應式開發