ITPub博客

首页 > 应用开发 > Java > 直播软件开发,通过js动态设置字体大小

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

原创 Java 作者:zhibo系统开发 时间:2021-12-01 14:10:10 0 删除 编辑

直播软件开发,通过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动态设置字体大小实现的相关代码,更多内容欢迎关注之后的文章


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69978258/viewspace-2845126/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2020-07-02

  • 博文量
    676
  • 访问量
    255568