设置窗口的自适应大小

Posted 2021-01-31 zhao01

在网页设计时经常遇到需要背景图或者轮播图等情况，为了满足众多用户的不同需求，我们又不能一次性的定死页面的宽和高，所以需要使用一些手段是窗口达到自适应的目的，在今天的开发中，遇到这个问题并找到了解决的方法

    <script type="text/javascript">
        // 窗口的自适应大小
        window.onload = windowHeight; //页面载入完毕执行函数
        function windowHeight() {
            var h = document.documentElement.clientHeight; //获取当前窗口可视操作区域高度
            var bodyHeight = document.getElementById("my-index"); //寻找ID为content的对象
            bodyHeight.style.height = (h - 25) + "px"; //你想要自适应高度的对象
        }
        setInterval(windowHeight, 500)//每半秒执行一次windowHeight函数


    </script>

通过上面的代码可以获取当前窗口的高度，并将得到的数值赋值给自适应的对象，这样子就可以达到窗体自适应的效果了

但需要注意的是  窗口自适应意味着CSS不可以给窗体设置固定的宽和高，在这里一般使用百分比，所以需要一定的想象力，否则页面内的元素会显得乱而无章

 body {
            padding-top: 10px;
            padding-bottom: 20px;
            height: 100%;
        }

        .modal-body p span {
            font-family: 微软雅黑;
            font-size: 14px;
            color: black;
        }

        #my-index {
            min-height:200px;
            min-width: 300px;
            background-size: 100%, 100%;
            background-image: url("image/temp01.jpg");
        }

        .logo{
            position: absolute;
            left: 37.5%;
            top: 37.5%;
            border-radius: 10px;
            width: 25%;
            height: 25%;
            background-color: white;
            text-align: center;
        }
        .logo .logo-icon{
            height: 50%;
            width: 80%;
            text-align: center;
            overflow: hidden;
        }
        .logo .logo-icon img{
            width: 100%;
            text-align: center;
            margin: 10% 0 10% 20%;
        }
        .logo .logo-link{
            font-size: 20px;
            font-weight: bold;
            margin-top: 15%;
        }

        .com-intro{
            position: absolute;
            left: 15%;
            top: 20%;
            border-radius: 20%;
            width: 25%;
            height: 25%;
            background-color: cyan;
            text-align: center;
        }
        .com-intro p{
            font-size: 50px;
            margin-top: 20%;
        }
        .com-intro-menu{
            display: none;
        }

        .com-products{
            position: absolute;
            right: 15%;
            top: 20%;
            border-radius: 20%;
            width: 25%;
            height: 25%;
            background-color: cyan;
            text-align: center;
        }
        .com-products p{
            font-size: 50px;
            margin-top: 20%;
        }

        .com-study{
            position: absolute;
            left: 15%;
            bottom: 20%;
            border-radius: 20%;
            width: 25%;
            height: 25%;
            background-color: cyan;
            text-align: center;
        }
        .com-study p{
            font-size: 50px;
            margin-top: 20%;
        }

        .com-join{
            position: absolute;
            right: 15%;
            bottom: 20%;
            border-radius: 20%;
            width: 25%;
            height: 25%;
            background-color: cyan;
            text-align: center;
        }
        .com-join p{
            font-size: 50px;
            margin-top: 20%;
        }

其次，文本居中问题，水平居中可以使用text-align：center，但不支持垂直居中，所以需要根据需要进行margin或者padding属性调整，自适应的使用百分比，固定的可以直接使用像素