移动端字体适配设置

750px 是 iPhone6 的物理像素,即屏幕分辨率;
移动端 UI 设计稿是按照 iPhone6 设备的物理像素所给;
通过动态的获取设备独立像素,然后除以设计稿的宽度,然后设置 rem,来动态自适应字体大小;
为什么要乘100,放大一些,便于计算,只需要将设计稿量出来的 px, 小数点向左移2位,即可转换成 rem;

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

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

链接:https://www.jianshu.com/p/2c4c948f4c18


发表评论

电子邮件地址不会被公开。 必填项已用*标注