码迷,mamicode.com
首页 > 移动开发 > 详细

移动端应用rem定义相对长度单位

时间:2020-03-14 19:54:31      阅读:67      评论:0      收藏:0      [点我收藏+]

标签:nts   fonts   nbsp   相对   function   code   dev   ati   cti   

rem是根本根元素,也就是html的字体大小来计算被定义元素的大小,而根元素的字体大小取绝于屏幕宽度,相应的JS代码:

    (function (doc, win) {
        var fs = document.body.clientWidth / 750 * 28;
        fs = fs > 24 ? 24 : fs;
        fs = fs < 12 ? 12 : fs;
        document.documentElement.style.fontSize = fs + "px";

        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);

 

移动端应用rem定义相对长度单位

标签:nts   fonts   nbsp   相对   function   code   dev   ati   cti   

原文地址:https://www.cnblogs.com/johnjackson/p/12493656.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!