移动端布局伸缩、设置div高度等比例缩放-CFANZ编程社区

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

仅供学习，转载请注明出处

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

问题描述

首先写一个移动端布局的div出来看看，示例如下：

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

随着移动端的屏幕大小，div的布局宽度是设置100%，所以可以跟着变化。但是高度是固定写了10rem的高度，这样是无法随着宽度变化进行等比例变化的。

移动端布局伸缩、设置div高度等比例缩放_微信公众号_03

那么解决这个问题的关键就是，因为高度是使用rem单位设置的，只要随着屏幕的宽度变化，设置html的font-size大小变化，就可以控制高度的变化。

编写JavaScript脚本，控制html的`font-size`变化

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

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

可以看到，随着宽度变化，高度也相应有了变化了。

示例完整代码如下

<!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>