H5页面字体大小使用rem （重置字体大小）setFontSize.js

最新推荐文章于 2023-05-04 16:40:40 发布

weixin_30341745

最新推荐文章于 2023-05-04 16:40:40 发布

阅读量312

点赞数

原文链接：http://www.cnblogs.com/ourLifes/p/7886276.html

版权

本文介绍了一种使用JavaScript动态调整HTML根元素字体大小的方法，确保不同设备屏幕宽度下网页元素的响应式布局效果一致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*by  min*/
//初始化rem
(function(){
    var getStyle = (function(){
        if(window.currentStyle){
            return function(obj, name){
                return obj.currentStyle[name];
            }
        }
        else{
            return function(obj, name){
                return getComputedStyle(obj, false)[name];
            }
        }
    })();

    var addEvent = (function(){
        if(document.attachEvent){
            return function(obj, ev, fn){
                obj.attachEvent('on'+ev, fn);
            };
        }
        else{
            return function(obj, ev, fn){
                obj.addEventListener(ev, fn, false);
            };
        }
    })();

    var oHtml = document.querySelector('html');
    var fontSize = getStyle(oHtml, 'fontSize').split('px')[0];
    var originalWidth = 750;

    setFontSize();

    addEvent(window, 'resize', function(){
        setFontSize();
    });

    function setFontSize() { 
        var size = size || 200;
        var _fontSize = (getSize()['width'] * fontSize / 750)>size?size:(getSize()['width'] * fontSize / 750);
        oHtml.style.fontSize = _fontSize + "px";
    }

    function getSize() {
        return {
            width :document.documentElement.clientWidth || document.body.clientWidth,
            height :document.documentElement.clientHeight || document.body.clientHeight
        }
    }
})();

　　setFontSize.js

注意html字体大小要先设置成100px，并且JS在CSS重置为100px以后引入。

转载于:https://www.cnblogs.com/ourLifes/p/7886276.html