针对移动端设置rem的问题

通常最简单的设置rem的方法为：body {font-size:62.5%}   【1rem=10px】
但是这种方法在用于小于0.8rem字体的时候就会设置不了
所以最好的方法还是使用JS判定

//原生
(function () {
    var docEl = document.documentElement;
    var resize = 'orientationchange' in window ? 'orientationchange' : 'resize';
    var setRem = function () {
        var screenWidth = docEl.clientWidth || window.screen.width || 360;
        // 750 PSD宽度(可变的)
        docEl.style.fontSize = (100 * screenWidth / 750) + 'px';
    };
    window.addEventListener('resize', setRem, false);
    setRem();
})();// 用法psd量出来的像素距离 除以100  比如psd: 100px 转换后 1rem;
//JQ
function resetFontSize(){
    $('html').css('font-size', $('body').width()/7.5);
}
resetFontSize();
$(window).resize(function(){
    resetFontSize();
})

​

欢迎分享本文，转载请保留出处：前端ABC » 针对移动端设置rem的问题