直播軟體開發，通過js動態設定字型大小

zhibo系統開發發表於2021-12-01
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動態設定字型大小實現的相關程式碼，更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69978258/viewspace-2845126/，如需轉載，請註明出處，否則將追究法律責任。

相關文章