设置窗口的自适应大小

Posted zhao01

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了设置窗口的自适应大小相关的知识,希望对你有一定的参考价值。

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

    <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属性调整,自适应的使用百分比,固定的可以直接使用像素

以上是关于设置窗口的自适应大小的主要内容,如果未能解决你的问题,请参考以下文章

panel怎么设置自适应窗体大小

Vuevuejs中拖动改变元素宽度实现宽度自适应大小

div+css怎么让图片自适应大小时,又不超过它本身最大的时候!

轮播图js怎么设置图片自适应大小

Android项目实战:TextView自适应大小

android怎么设置自适应大小的背景图片