px 轉 rem

 1.vue:pxtorem.js  main.js直接引用

!(function(n) {
  var e = n.document,
    t = e.documentElement,
    i = 750,
    d = i / 100,
    o = "orientationchange" in n ? "orientationchange" : "resize",
    a = function() {
      var n = t.clientWidth || 320;
      n > 750 && (n = 750);
      t.style.fontSize = n / d + "px";
    };
  e.addEventListener &&
    (n.addEventListener(o, a, !1),
    e.addEventListener("DOMContentLoaded", a, !1));
})(window);

2.html:html,body { font-size: 100px; } 其他直接根據設計尺寸使用:px/100 = rem

 <script type="text/javascript">
    var deviceWidth, devicePer;
    setHtmlFontSize();
    if (window.addEventListener) {
      window.addEventListener('resize', function () {
          setHtmlFontSize();
      }, false)
    }
    function setHtmlFontSize () {
      if (document.documentElement.clientWidth<1000) {
        deviceWidth = document.documentElement.clientWidth > 750 ? 750 : document.documentElement.clientWidth;
        devicePer = 7.5;
      }
      document.getElementsByTagName('html')[0].style.cssText = 'font-size:' + deviceWidth / devicePer + 'px!important'
    }
  </script>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章