rem 的換算

<script>

方法1：

            //適合em,rem(注：em相對於自身父級的字體大小，rem是相對根元素的字體)

          //10*(s_width/375) 375是按照750的設計圖來作的，設計圖尺寸變化修改這的值便可  

          //頁面佈局高度/寬度/字體大小rem算法：(設計圖的寬度或高度)/2/10 = ()rem  

        function initScale(){

       var s_width = window.innerWidth;

         var s_height = window.innerHeight;

         document.querySelector('html').style.fontSize = 10*(s_width/375) + 'px';

        }

        initScale();

方法2

 

!function(){     

//rem  計算方式  px/40 

function setFontSize(){  

var _w = document.documentElement.clientWidth;

_w = _w > 640?640:_w;      

document.documentElement.style.fontSize = _w/16 +"px";

}

 var _t = null;

 window.addEventListener("resize",function(){

clearTimeout(_t);

_t = setTimeout(setFontSize,100);

 },false);

 setFontSize();  

  }(window);

方法3

 

        var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;

document.getElementsByTagName('html')[0].style.fontSize = clientWidth / 10 + "px"

 

方法4

//動態調整rem值,除以50
function setsize() {
  var winW = document.documentElement.clientWidth,
        winH = document.documentElement.clientHeight,
      baseFontSize = 50,
      baseWidth = 640,
      winWidthSize = Math.min(winW, winH);
  if (winWidthSize > 560) {
    winWidthSize = 560;
  }
  if (winWidthSize < 270) {
    winWidthSize = 270;
  }
  var _html = document.getElementsByTagName('html')[0];
  _html.style.fontSize =winWidthSize / baseWidth * baseFontSize + 'px';
}
setsize();

方法6

(function(doc, win){
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        reCalc = function() {
            var clientW = docEl.clientWidth;

            if (!clientW) return;

            clientW = clientW < 320 ? 320 : clientW;

            if (clientW >= 750) {
                doc.getElementsByTagName('html')[0].style.fontSize = '100px';
            } else {
                doc.getElementsByTagName('html')[0].style.fontSize = 100 * (clientW / 750) + 'px';
            }

        };

        if (!doc.addEventListener) return;

        win.addEventListener(resizeEvt, reCalc, false);
        doc.addEventListener('DOMContentLoaded', reCalc, false);
})(document, window);

 

</script>