直播软件开发,通过js动态设置字体大小

直播软件开发,通过js动态设置字体大小实现的相关代码

<!DOCTYPE html>
<html>
 
<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>
 
 
     通过下面的js设置
     下次试用只要下面的
 
 
<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>

​以上就是 直播软件开发,通过js动态设置字体大小实现的相关代码,更多内容欢迎关注之后的文章

 

posted @ 2021-12-01 14:10  云豹科技-苏凌霄  阅读(90)  评论(0编辑  收藏  举报