根据窗口的大小，自动改变字体大小，使用rem。_html 根据屏幕大小改变字体大小-优快云博客

本文介绍了如何根据窗口尺寸，利用rem单位动态调整网页中字体的大小，以实现更好的响应式设计。分别针对320像素、414像素和768像素三种屏幕尺寸进行了说明。

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

1.320尺寸
在这里插入图片描述
2.414尺寸

3.768尺寸

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div1{
            font-size: 1rem;
            height: 2rem;
            width: 100%;
            background: #00b25e;
        }
    </style>
</head>
<body>
    <div>
        <div class="div1">
            我是一个div标签
        </div>
    </div>

    <script type="text/javascript">
        /* 这里我们利用了一个自执行函数 */
        (function(){
            change();
            function change(){
                //html的 font-size 的大小尺寸
                //这里的html字体大小利用了一个简单的数学公式，当我们默认设置以屏幕320px位基准此时的字体大小为20px(320    20px),那么浏览器窗口大小改变的时候新的html的fontSize（clientWidth  新的值）就是clientWidth*20/320
                document.documentElement.style.fontSize = document.documentElement.clientWidth*20/320 +'px';
            }
            /* 监听窗口大小发生改变时*/
            window.addEventListener('resize',change,false);
        })();
    </script>
</body>
</html>