通过js动态改变字体大小（通过相对单位rem可以做到只修改根元素字体大小就成比例地调整页面所有字体大小）

最新推荐文章于 2024-05-17 14:33:55 发布

青青子衿越

最新推荐文章于 2024-05-17 14:33:55 发布

阅读量1.3k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_46376192/article/details/127736929

版权

function setRem() {
    var ui_w = 375;
    var client_w = document.documentElement.clientWidth || document.body.clientWidth;
    var html = document.getElementsByTagName('html')[0];
    html.style.fontSize = (client_w / ui_w) * 10 + 'px'
}
setRem();
var timer;
window.onresize = function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
        setRem();
    }, 100)
}

下面使用jquery，记得html页面引入jquery的js

$(function(){
    function setRem(){
        var clientWidth=$(window).width();
        var nowRem=(clientWidth/375*10);
        $("html").css("font-size",parseInt(nowRem, 10)+"px");
    };
    setRem();

    $(function(){
        var timer;
        $(window).bind("resize",function(){
            clearTimeout(timer)
            timer=setTimeout(function(){
                setRem();
            }, 100)
        })
    });
});