移動端rem設定，自動更改html<font-size>

標籤：phone   function   dia   dom   turn   add   return   event   iphone6   

<script>                (function (doc, win) {                var docEl = doc.documentElement,                resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,                recalc = function () {                var clientWidth = docEl.clientWidth;                if (!clientWidth) return;                docEl.style.fontSize = 20 * (clientWidth / 320) + ‘px‘;            };            if (!doc.addEventListener) return;            win.addEventListener(resizeEvt, recalc, false);            doc.addEventListener(‘DOMContentLoaded‘, recalc, false);            })(document, window);     </script>

　　

加入這麼一段js，就可以根據螢幕的寬度動態改變font-size

根據這一句 docEl.style.fontSize = 20 * (clientWidth / 320) + ‘px‘;  可知

iphone4寬度是320px，那麼font-size就是20px, 100px就是5rem

iphone6寬度是375px，那麼font-size就是23.4375px,100px就是4.267rem

 包治紅米手機 小米手機。  用媒體查詢 @media有點坑。 有的不支援所以強制通過一段js根據螢幕的寬度動態改變根的html 

 

移動端rem設定，自動更改html<font-size>