[js] 响应式字体解决方案

 

#媒体查询配合rem

html {
    font-size : 20px;
}
@media only screen and (min-width: 320px){
    html {
        font-size: 10px;
    }
}
@media only screen and (min-width: 375){
    html {
        font-size: 16; 
    }
}
@media only screen and (min-width: 414px){
    html {
        font-size: 20px; 
    }
}

 

#js

   var doc = document,
   win = window;
   function initFontSize  () {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth; //window.innerWidth;
                if (!clientWidth) return;
                fontSizeRate = (clientWidth / 375);
                var baseFontSize = 15 * fontSizeRate;
                docEl.style.fontSize = baseFontSize + 'px';
            };

        recalc();
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    };

 

注意：

1、小数数值处理
不同浏览器计算rem转换为px数值时，对于小数点后的数值的处理是有所偏差，rem计算偏差的根源是浏览器内核数字类型的区别，如果浏览器的内核数字类型是float类型，能够较好地支持有小数点的数值。当浏览器内核数字类型是int类型，不支持小数点，会对数字进行四舍五入，这样就会有偏差。如果元素越大偏差得就越明显

2、雪碧图rem
使用rem的同时又涉及到雪碧图时，rem的换算成px的尺寸非严格精确尺寸，如果雪碧图如果图标之间的距离过小，就可能导致图标过界，因此图与图之间的间隙需要留相应大一点。

3、单纯的rem没解决高度适配的问题。
单纯的rem没解决高度适配的问题，如果需要在使用rem基础上还做相应的高度适配，就要通过相应的js辅助