移动端适配-rem

[ly2011]

设计稿： iphone尺寸(750 * 1334 )

  (function(doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange': 'resize',
    recalc = function() {
        var clientWidth = docEl.clientWidth || 320;
        var width = (clientWidth <= 320) ? 320: ((clientWidth >= 750) ? 750: clientWidth);
        var fontSize = 100 * (width / 375);
        docEl.style.fontSize = fontSize + 'px'
    };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    recalc()
})(document, window);

具体使用方法： 根元素(html)在iphone下为 100px。 div 在设计稿上宽高为-> 60px * 44px， 转为rem单位的过程: 宽： (60 / 2 / 100)rem -> 0.3rem; 高: (40 / 2/ 100)rem。