移动端动态设置字体大小

最新推荐文章于 2024-03-15 18:22:43 发布

李先坤

最新推荐文章于 2024-03-15 18:22:43 发布

阅读量303

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/weixin_43391261/article/details/127174256

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*  单位rem 是以根节点（html）的字体大小为参照物，1rem==根节点fontsize*/
        html {
            /* 相当于100px */
            font-size: 625%;
        }

        .box {
            /* 10px */
            font-size: .1rem;

        }

        /* 200px */
        .box02 {
            font-size: 2rem;
        }
    </style>
</head>

<body>
    <div class="box">
        移动端动态字体变大变小
        <div class="box02">
            你好，世界
        </div>
    </div>
</body>

</html>
<script>
    function setRem() {
        //获取默认尺寸  defaultSize
        var defaultSize = 375;
        //获取设备的宽
        var clwidth = document.documentElement.clientWidth || document.body.clientWidth;
        console.log(defaultSize, clwidth);
        //设置html节点的大小
        var html_ = document.getElementsByTagName('html')[0];
        html_.style.fontSize = (clwidth / defaultSize) * 100 + 'px'

    }
    // window.onresize浏览器被重置大小执行事件
    window.onresize = setRem;
</script>