移动端布局伸缩、设置div高度等比例缩放

最新推荐文章于 2023-06-30 23:53:34 发布

念了半位旧人

最新推荐文章于 2023-06-30 23:53:34 发布

阅读量451

点赞数

文章标签： javascript html 前端

本文链接：https://blog.youkuaiyun.com/Armof/article/details/128115079

版权

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <style>
        html{
            font-size: 20px;
        }

        .box1{
            width: 100%;
            height: 10rem;

            background-color: gold;
            font-size: 14px;
            line-height: 10rem;
            text-align: center;
        }
    </style>
    <script>
        (function(){
            var calc = function(){
                var docElement = document.documentElement;
                var clientWidthValue = docElement.clientWidth > 750 ? 750 : docElement.clientWidth;
                docElement.style.fontSize = 20*(clientWidthValue/375) + 'px';
            }
            calc();
            window.addEventListener('resize',calc);
        })();
    </script>
</head>
<body>
    <div class="box1">移动端高度等比例问题</div>
</body>
</html>