移动端适配——font-size计算

        function calcFontSize(){
            var view_width = window.screen.width;
            var view_height = window.screen.height;
            var font_size = view_width/15;//750设计图
            // var font_size = view_width/16;//640设计图
            var height_rem = view_height/font_size;
            var html =document.getElementsByTagName('html')[0];
                html.style.fontSize = font_size+'px';
        }
        //
        window.onresize = function(){
            calcFontSize()
        }

        window.onload = function(){
            calcFontSize()
        }

 rem,px,rpx之间的转化

//js转换
    (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); 

根据设计稿宽度计算，

1.若设计稿宽度是750，则1rpx = 1px，1rem=20*（750/320）+‘px’，若设计稿宽度是640，则1px = 750/640+‘rpx’，1rem=20*(640/320)+'px'=40px，

2.rpx换算，1px = （屏幕宽度/750）+‘rpx’；

 

淘宝移动端解决方案

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

 or

; (function (win, lib) {
        var doc = win.document;
        var docEl = doc.documentElement;
        var metaEl = doc.querySelector('meta[name="viewport"]');
        var flexibleEl = doc.querySelector('meta[name="flexible"]');
        var dpr = 0;
        var scale = 0;
        var tid;
        var flexible = lib.flexible || (lib.flexible = {});
        /*将根据已有的meta标签来设置缩放比例*/
        if (metaEl) {
          var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
          if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
          }
        } else if (flexibleEl) {
          var content = flexibleEl.getAttribute('content');
          if (content) {
            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
            if (initialDpr) {
              dpr = parseFloat(initialDpr[1]);
              scale = parseFloat((1 / dpr).toFixed(2));
            }
            if (maximumDpr) {
              dpr = parseFloat(maximumDpr[1]);
              scale = parseFloat((1 / dpr).toFixed(2));
            }
          }
        }
        /*当原先没有设置过meta，以及缩放比例
        * iphone手机根据2,3屏幕处理
        * 其他设备下，仍旧使用1倍的方案  得到dpr和scale的值
        * */
        if (!dpr && !scale) {
          var isAndroid = win.navigator.appVersion.match(/android/gi);
          var isIPhone = win.navigator.appVersion.match(/iphone/gi);
          var devicePixelRatio = win.devicePixelRatio;
          if (isIPhone) {
            // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
              dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
              dpr = 2;
            } else {
              dpr = 1;
            }
          } else {
            // 其他设备下，仍旧使用1倍的方案
            dpr = 1;
          }
          scale = 1 / dpr;
        }
        /*设置html的data-dpr的值*/
        docEl.setAttribute('data-dpr', dpr);
        /*
        *scale
        * 查询有没有meta属性，没有的情况下加上 <meta content='initial-scale= scale, maximum-scale=scale, minimum-scale=scale, user-scalable=no/>
        * */
        if (!metaEl) {
          metaEl = doc.createElement('meta');
          metaEl.setAttribute('name', 'viewport');
          metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
          if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
          } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
          }
        }
        /*
        * 这个width跟dpr有关系     例如iphone5 dpr为2  得到的屏幕的宽为640px
        *  例如iphone6 plus dpr为3 得到的屏幕的宽为1242px
        * */
        function refreshRem() {
          var width = docEl.getBoundingClientRect().width;
          //注意这里，这里是适配手机的一个具体的参数，相对大于540的就不适用了
          if (width / dpr > 540) {
            width = 540 * dpr;
          }
          var rem = width / 10;
          docEl.style.fontSize = rem + 'px';
          flexible.rem = win.rem = rem;
        }
  
        win.addEventListener('resize', function () {
          clearTimeout(tid);
          tid = setTimeout(refreshRem, 300);
        }, false);
        win.addEventListener('pageshow', function (e) {
          if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
          }
        }, false);
  
        if (doc.readyState === 'complete') {
          doc.body.style.fontSize = 12 * dpr + 'px';
        } else {
          doc.addEventListener('DOMContentLoaded', function (e) {
            doc.body.style.fontSize = 12 * dpr + 'px';
          }, false);
        }
  
  
        refreshRem();
        /*rem转px
        px转rem*/
        flexible.dpr = win.dpr = dpr;
        flexible.refreshRem = refreshRem;
        flexible.rem2px = function (d) {
          var val = parseFloat(d) * this.rem;
          if (typeof d === 'string' && d.match(/rem$/)) {
            val += 'px';
          }
          return val;
        }
        flexible.px2rem = function (d) {
          var val = parseFloat(d) / this.rem;
          if (typeof d === 'string' && d.match(/px$/)) {
            val += 'rem';
          }
          return val;
        }
  
      })(window, window['lib'] || (window['lib'] = {}));

 

转载于:https://www.cnblogs.com/huangmin1992/p/8004990.html