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

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中會得心應手