通过js设置移动端放大缩小的字体大小

不是山谷.:.

于 2022-05-25 19:13:07 发布

阅读量758

点赞数

文章标签： javascript html webview

本文链接：https://blog.csdn.net/qq_67118860/article/details/124971900

版权

相对单位rem

rem的值并不是固定的

rem是相对根节点html发生变化的（和父节点无关）

实际开发中一般默认的把html根节点设置为10px（62.5%）或者是100px，方便后续计算

<!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>rem相对根节点</title>

    <style>
        /* rem是相对于根节点html的font-size值
            
         */
        html {
            font-size: 100px;
        }

        div {
            /* 16像素 */
            font-size: .16rem;
        }

        h1 {
            /* 20像素 */
            font-size: .2rem;
        }
    </style>
</head>

<body>
    <div>
        我是div元素
        <h1>我是div的子元素h1</h1>
    </div>
</body>

<script>
    function setRem() {
        var ui_w = 375;
        // 获取屏幕的宽度
        var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
        console.log(ui_w,clientWidth);

        // 通过js动态改变html根节点字体大小
        var html_ = document.getElementsByTagName('html')[0];
        html_.style.fontSize = (clientWidth/ui_w)*100 +'px';
    }
    // window.onresize 浏览器被重置大小执行事件
    window.onresize = setRem;


</script>

</html>