詳聊移動端rem的適配問題

如今移動端對於前端行業來講特別流行，廢話很少說，那咱們就來聊聊移動端的哪些事？

注意：寫移動端必須在html頁面head標籤內加一個meta標籤---viewport視口

　　<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

1. 來簡單說說rem原理：rem=root element 根元素  rem是來獲取html(根元素)的fontSize值的

2. 作移動端經常使用佈局方式：流式佈局(百分比佈局)+rem佈局

3. 移動端設計稿的尺寸：

　　　　640x1136的寬度(單屏的頁面)   參照iphone5 手機分辨率:320*2

　　　　750x1334的寬度(單屏的頁面)  參照iphone6 手機分辨率:375*2

　　　　1242*2208的寬度(單屏的頁面) 參照iphone6 plus 手機分辨率:414*3

　　單屏頁面經常使用在場景應用的H5頁面中(活動頁面)

 

4. 手機分辨率：(iphone手機的機型)

　　 　　iphone4 320x480 dpr 2.0

　　　　 iphone5/5s 320x568 dpr 2.0

　　　　 iphone6 375x667 dpr 2.0

　　　　 iphone6 plus 414x736 dpr 3.0

 

5. 作移動端須要適配哪些機型？

　　按照iphone爲例(緣由：設計圖是參照iphone手機來作的)

　　iphone4/4s/5/5s   尺寸：320

       iphone6/6s/7       尺寸：375

       iphone6plus        尺寸：414

　　640px                 尺寸：大於等於640px的

       

6. 適配移動端，來獲取fontSize值

　　1) 用媒體查詢靜態獲取fontSize值

　　    設計稿尺寸：640   參照iphone5   分辨率：320*2   dpr2.0

　　　 iphone4/4s/5/5s  分辨率320

　　   　　 html{ font-szie:50px; } 

           iphone6/6s 375  

　　　　    @media all and (min-width:375px){ html{ font-size:58.59375px; } }

　　    iphone6p 414

　　　　   @media all and (min-width:414px){ html{ font-size:64.68755px; } }

　　    640尺寸

　　　　   @media all and (min-width:640px){ html{ font-size:100px; } }

 

　　   設計稿尺寸750  參照iphone6  分辨率：375*2   dpr:2.0

　  　     iphone6  375

　　　　　　html{ font-szie:50px; }

　　　　iphone4/4s/5/5s 320

　　　　　　@media all and (min-width:320px){ html{ font-size:42.66px; } }

　　　　iphone6plus 414

　　　　　　@media all and (min-width:320px){ html{ font-size:55.2px; } }

　　　　尺寸640

　　　　　　@media all and (min-width:640px){ html{ font-size:85.33px; } }

　　2) 用JS來動態獲取fontSzie值

　　    引入JS方式：內嵌式--在html頁面中建立一個script元素(標籤)，把JS代碼放在script元素內

　　　第一種方法：　

　　　　<script>

　　　　　　/*動態設置像素比*/

　　　　　　var iScale = 1;

　　　　　　iScale = iScale / window.devicePixelRatio;

　　　　　　document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '">')

　　　　　　/*動態設置文字大小*/

　　　　　　function resize(){

    　　　　  　　 var iWidth = document.documentElement.clientWidth;

    　　　　  　　document.getElementsByTagName('html')[0].style.fontSize = iWidth / 16 + 'px';

　　　　　　}

　　　　　　resize();

　　　　</script>

         第二種方法：

                <script>　　　　　　　　　　　　　

   　　　　　　 function setFontSize() {
       　　　　　　　　 var deviceWidth = document.documentElement.clientWidth;
       　　　　　　　　 if (deviceWidth > 640) {
           　　　　　　　　 deviceWidth = 640;
       　　　　　　　　 }
      　　　　　　　　  document.documentElement.style.fontSize = deviceWidth / 6.4 + "px";
  　　　　　　  }

   　　　　　　 var _t = null;
   　　　　　　 window.addEventListener("resize", function () {
     　　　　　　  　　 clearTimeout(_t);
      　　　　　　  　　_t = setTimeout(setFontSize, 100);
   　　　　　　 }, false);
   　　　　　　 　　setFontSize();
　　　　　　})(window);

　　　　</script>

注意：爲何把html的fontSize值設置成100px呢？

　　　　1. 默認1rem=16px,引伸出來的計算公式 1rem=100px 

               2. 利於計算方便

          怎麼計算成rem單位？

          好比設計圖裏面有個按鈕，是100px*30px的，計算成rem單位爲100/100=1rem、30/100=0.3rem 因此計算出的寬高爲1rem*0.3rem(全部的像素px單位都要除以100，由於咱們把html的fontSize值設置成了1rem=100px)